From 499233d4d0cae1055662bf3ea2224a2b805f6cc3 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Fri, 24 May 2024 12:54:10 +0200 Subject: [PATCH] style login form --- scss/styles.scss | 20 +++++++++++++++++++ src/cone/app/browser/login.py | 9 ++------- src/cone/app/browser/static/cone/cone.app.css | 20 +++++++++++++++++++ .../app/browser/static/cone/cone.app.min.css | 2 +- 4 files changed, 43 insertions(+), 8 deletions(-) diff --git a/scss/styles.scss b/scss/styles.scss index dc8a6b90..6f0b48b4 100644 --- a/scss/styles.scss +++ b/scss/styles.scss @@ -322,3 +322,23 @@ body { .table_length, .table_filter { width: unset; } + +// login view +#form-loginform { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + + #field-loginform-user, #field-loginform-password { + display: grid; + grid-template-columns: 1fr 2fr; + } + + #input-loginform-login { + margin-top: 2rem; + width: 200px; + } +} \ No newline at end of file diff --git a/src/cone/app/browser/login.py b/src/cone/app/browser/login.py index 8a535685..674d3fb5 100644 --- a/src/cone/app/browser/login.py +++ b/src/cone/app/browser/login.py @@ -43,17 +43,13 @@ def prepare(self): 'field:label:div:help:error:text', props={ 'required': _('no_username_given', default='No username given'), - 'label': _('username', default='Username'), - 'label.class_add': 'col-sm-2', - 'div.class_add': 'col-sm-5', + 'label': _('username', default='Username') }) form['password'] = factory( 'field:label:div:help:*credentials:error:password', props={ 'required': _('no_password_given', default='No password given'), 'label': _('password', default='Password'), - 'label.class_add': 'col-sm-2', - 'div.class_add': 'col-sm-5', }, custom={ 'credentials': ([self.login], [], [], []), @@ -61,7 +57,6 @@ def prepare(self): actions = form['form_actions'] = factory( 'field:div', props={ - 'div.class_add': 'col-sm-offset-2 col-sm-5', 'structural': True, }) actions['login'] = factory( @@ -72,7 +67,7 @@ def prepare(self): 'handler': self.noop, 'next': self.next, 'label': _('login', default='Login'), - 'div.class_add': 'col-sm-offset-2 col-sm-5', + 'class_add': 'bg-primary text-light' }) self.form = form diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css index 3f713ee3..8c0353e3 100644 --- a/src/cone/app/browser/static/cone/cone.app.css +++ b/src/cone/app/browser/static/cone/cone.app.css @@ -40,6 +40,9 @@ color: #212529; background-color: #fff; } +[data-bs-theme=light] #input-loginform-login { + color: #f8f9fa; +} /* import everything where we need changed bootstrap variables for here */ :root { @@ -328,3 +331,20 @@ body { .table_length, .table_filter { width: unset; } + +#form-loginform { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +} +#form-loginform #field-loginform-user, #form-loginform #field-loginform-password { + display: grid; + grid-template-columns: 1fr 2fr; +} +#form-loginform #input-loginform-login { + margin-top: 2rem; + width: 200px; +} diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css index 73f778ce..29fab44e 100644 --- a/src/cone/app/browser/static/cone/cone.app.min.css +++ b/src/cone/app/browser/static/cone/cone.app.min.css @@ -1 +1 @@ -[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}:root{--sidebar-width: 300px;--navbar-height: 50px}body{height:100vh}#sidebar_left{height:100vh;max-height:100vh;user-select:none}#sidebar_left .scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:4}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}#header-logo{z-index:4}#header-logo>span{font-size:1.5rem !important}#header-main{height:50px}#header-main #navbar-content-wrapper{min-width:0;z-index:3000}#header-main #navbar-content{min-width:0}#header-main #colortoggle-switch{width:2rem;height:1rem}#header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}@media(min-width: 576px){#header-main #personaltools .dropdown-toggle.show{background-color:var(--bs-border-color-translucent)}#header-main #personaltools .dropdown-toggle::after{margin-right:10px;margin-left:0}}@media(max-width: 991.98px){#header-main #navbar-content{flex-direction:column}#header-main #mainmenu{order:2}#header-main #livesearch{order:1;width:100%;padding-left:40px !important}}@media(max-width: 575.98px){#header-main #personaltools>div{padding:5px 0;width:50%;display:inline-flex !important}#header-main #personaltools-dropdown{flex-direction:column}#header-main #personaltools-dropdown .dropdown-menu{position:relative;width:200%;transform:translateX(-50%)}}@media(min-width: 992px){#header-main #navbar-content-wrapper{box-shadow:none !important}#header-main #navbar-content-wrapper,#header-main #navbar-content,#header-main #mainmenu{height:100%}#header-main #personaltools-dropdown{order:2}#header-main #colortoggler{order:1}}@media(min-width: 992px)and (max-width: 1399.98px){#header-main #navbar-content-wrapper{margin-left:200px}}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#content{height:calc(100% - 40px)}#main-area{width:0 !important}#contextmenu li.nav-item.dropdown .nav-link.dropdown-toggle.show{background-color:var(--bs-border-color-translucent)}#contextmenu a{padding:0 8px;text-decoration:none;color:var(--bs-secondary-color)}#contextmenu .dropdown-item:active{background-color:var(--bs-dropdown-link-hover-bg)}#contextmenu .dropdown-item a{padding:0}#contextmenu .dropdown-item a.selected{color:#4e7bba}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}@media(min-width: 1400px){#header-logo{color:#fff}}.table_length,.table_filter{width:unset} +[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] #input-loginform-login{color:#f8f9fa}:root{--sidebar-width: 300px;--navbar-height: 50px}body{height:100vh}#sidebar_left{height:100vh;max-height:100vh;user-select:none}#sidebar_left .scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:4}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}#header-logo{z-index:4}#header-logo>span{font-size:1.5rem !important}#header-main{height:50px}#header-main #navbar-content-wrapper{min-width:0;z-index:3000}#header-main #navbar-content{min-width:0}#header-main #colortoggle-switch{width:2rem;height:1rem}#header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}@media(min-width: 576px){#header-main #personaltools .dropdown-toggle.show{background-color:var(--bs-border-color-translucent)}#header-main #personaltools .dropdown-toggle::after{margin-right:10px;margin-left:0}}@media(max-width: 991.98px){#header-main #navbar-content{flex-direction:column}#header-main #mainmenu{order:2}#header-main #livesearch{order:1;width:100%;padding-left:40px !important}}@media(max-width: 575.98px){#header-main #personaltools>div{padding:5px 0;width:50%;display:inline-flex !important}#header-main #personaltools-dropdown{flex-direction:column}#header-main #personaltools-dropdown .dropdown-menu{position:relative;width:200%;transform:translateX(-50%)}}@media(min-width: 992px){#header-main #navbar-content-wrapper{box-shadow:none !important}#header-main #navbar-content-wrapper,#header-main #navbar-content,#header-main #mainmenu{height:100%}#header-main #personaltools-dropdown{order:2}#header-main #colortoggler{order:1}}@media(min-width: 992px)and (max-width: 1399.98px){#header-main #navbar-content-wrapper{margin-left:200px}}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#content{height:calc(100% - 40px)}#main-area{width:0 !important}#contextmenu li.nav-item.dropdown .nav-link.dropdown-toggle.show{background-color:var(--bs-border-color-translucent)}#contextmenu a{padding:0 8px;text-decoration:none;color:var(--bs-secondary-color)}#contextmenu .dropdown-item:active{background-color:var(--bs-dropdown-link-hover-bg)}#contextmenu .dropdown-item a{padding:0}#contextmenu .dropdown-item a.selected{color:#4e7bba}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}@media(min-width: 1400px){#header-logo{color:#fff}}.table_length,.table_filter{width:unset}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr}#form-loginform #input-loginform-login{margin-top:2rem;width:200px}