From 636bd5571b64c66f5048a439b5abe3a5a6217459 Mon Sep 17 00:00:00 2001 From: kuro610 Date: Wed, 1 Jun 2022 12:13:11 +0200 Subject: [PATCH 1/8] Update wrapper.tt to BS5, use now BS5 alerts for messages --- .../css/local_bootstrap_modifications.css | 64 +--- root/static/css/style.css | 214 +++---------- root/templates/browse/recipe/index.tt | 28 +- root/templates/project/show.tt | 112 +++---- root/templates/wrapper.tt | 300 ++++++++---------- 5 files changed, 251 insertions(+), 467 deletions(-) diff --git a/root/static/css/local_bootstrap_modifications.css b/root/static/css/local_bootstrap_modifications.css index 33f52d75..5a67c81f 100644 --- a/root/static/css/local_bootstrap_modifications.css +++ b/root/static/css/local_bootstrap_modifications.css @@ -1,20 +1,15 @@ - /* BOOSTRAP LOCAL CUSTOMIZATION */ - -/* -highlight fontcolor to white in case of navbar-light -*/ -.navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.active, -.navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .show > .nav-link { - color: rgba(220,220,220,1); +:root { + --cc-green: #4CAF50; + --cc-green-dark: #3A8E3D; + --cc-green-light: #6CBF6F; } + /* redefined list -> non-indended */ @@ -60,15 +55,6 @@ smaller font-size of text similar class small font-size: 65%; } - - - -input[type="number"] { - text-align: left; -} - - - /*=========================================================================== align material icons vertical: https://stackoverflow.com/questions/56171473/different-material-icons-styles-do-not-align ===========================================================================*/ @@ -95,50 +81,24 @@ input.with-markdown-preview { } -/*=========================================================================== -overwrite behavior of navbar-dark nav-links -===========================================================================*/ - -.navbar-dark .navbar-nav .nav-link { - color: rgba(255, 255, 255, 0.99); -} - -.navbar-dark .navbar-nav .nav-link:hover, -.navbar-dark .navbar-nav .nav-link:focus { - color: rgba(255, 255, 255, 0.75); -} - - /*=========================================================================== login logout header color ===========================================================================*/ -.login_logout input[name="logout"], -.login_logout button, -.login_logout a { - background-color: rgba(255,255,255,0.0); +.login-logout-btn { + background-color: transparent; color: #333333; border: 0px; - -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; -moz-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; } -.login_logout input[name="logout"]:active, -.login_logout input[name="logout"]:hover, -.login_logout button:active, -.login_logout button:hover, -.login_logout a:active, -.login_logout a:hover { - color: #f5f5ef; - background-color:rgba(255,255,255,0.0); - border: 0px; - - -webkit-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; - -moz-box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; - box-shadow: 0px 0px 0px rgba(255,255,255,0.0) !important; +.login-logout-btn:active, +.login-logout-btn:hover, +.login-logout-btn:focus { + color: var(--bs-light); } .bg-header { - background-color: #4CAF50; + background-color: var(--cc-green); } diff --git a/root/static/css/style.css b/root/static/css/style.css index 415ec984..7c41fb4f 100644 --- a/root/static/css/style.css +++ b/root/static/css/style.css @@ -16,161 +16,69 @@ html { body { margin: 0; position: relative; - height: 100%; - color: #333333; -} - -#container { - min-height: 100%; - position: relative; -} - -/******** header part ********/ - -/*** general part ***/ - -header { - margin: 0; - background-color: #4CAF50; -} - -header nav ul { - list-style-type: none; - padding-left: 0; -} - -header nav li { - display: inline; -} - -/* "Logout" must be button for POST request but style like link */ -header nav input[name="logout"]:hover, -header nav input[name="logout"] { - border: 0; - font-family: inherit; - font-size: inherit; - cursor: pointer; -} - -/* - * stop Firefox adding 2px to the submit button's height - * see https://stackoverflow.com/questions/12288175/firefox-adds-2px-padding-in-a-submit-button - */ -header nav input[name="logout"]::-moz-focus-inner { border:0; padding:0 } - -header h1 { - font-size: 2.5em; -} - -header p { - margin: 0; - padding: 0 0.5em 0 0.5em; - color: #f5f5ef; -} - -header p a[href] { - color: #f5f5ef; -} - -/*** user nav ***/ -header #user_nav { - height: 7em; - padding: 0 1.5em 0 1.5em; - display: flex; - justify-content: space-between; -} - -header #h1-div { - align-self: center; -} - -header #user_nav li { - padding-left: 1em; -} - -header #user_nav a { - padding: 0; -} - -header #user_nav h4 a:hover, -header #user_nav h4 a:active { - color: #333333; -} - -header #user_nav a:hover, -header #user_nav a:active { - color: #f5f5ef; -} - -header #user_nav ul { + color: var(--bs-dark); + min-height: 100vh; display: flex; flex-direction: column; - align-items: flex-end; } -header #user_nav ul p + div { - margin-top: 1em; +a { + text-decoration: none; + color: var(--bs-dark); } -header #user_nav ul div:only-child { - margin-top: 3em; +a.hov-under:hover, +a.hov-under:focus, +button.alert-link:hover, +button.alert-link:focus, +a.alert-link:hover, +a.alert-link:focus { + text-decoration: underline; } -header #user_nav h4 { - margin: 0; - padding: 0 0.5em 0 0.5em; - color: #f5f5ef; -} +/******** header part ********/ -header #user_nav h4 a { - color: #f5f5ef; +/*** general part ***/ +header h1 { + font-size: 2.5em; } -header nav input[name="logout"] { - background-color: #4CAF50; - color: #333333; +header a { + color: inherit; } -header nav input[name="logout"]:active, -header nav input[name="logout"]:hover { - color: #f5f5ef; - - box-shadow: 0px 0px 0px grey !important; +header a:hover, +header a:focus { + color: inherit; } /*** project nav ***/ +#project_nav .nav-link { + color: var(--bs-light); +} -header #project_nav a:hover { - background-color:#f5f5ef; - color: #333333; +#project_nav a:hover, +#project_nav a:focus { + background: var(--bs-light); + color: var(--bs-dark); } /*** submenu nav ***/ -header #submenu_nav a:hover, -header #submenu_nav a.current { - color: #f5f5ef !important; +#submenu_nav a:hover, +#submenu_nav a.active, +#submenu_nav a:focus { + color: var(--bs-light) !important; + background: var(--cc-green-dark); } /******** content part ********/ - -main { - padding: 1.5em; - padding-bottom: 12em; /*necessary for position of footer*/ +main a { + color: var(--cc-green); } -a[href] { - text-decoration:none; - color: #333333; -} - -main a[href] { - text-decoration:none; - color: #4CAF50; -} - -main a[href]:hover, -main a[href]:active { - color: #333333; +main a:hover, +main a:focus { + color: var(--bs-dark); } a.btn-secondary { @@ -202,18 +110,12 @@ code { padding: 0.25em; } -.message { - border: 2px solid; - border-radius: 0.5em; - padding: 0 0.5em; - margin: 0.5em 0; +button.alert-link { + background: transparent; + border: none; + padding: 0; } -.message-debug { background-color: #f5f5ef; color: DarkGrey; } -.message-info { background-color: #dfd; color: DarkGreen; } -.message-warn { background-color: orange; border-color: DarkOrange; color: black; } -.message-error { background-color: #f55; border-color: DarkRed; color: black; } - .inline, .inline * { display: inline; @@ -329,37 +231,11 @@ input[type=number].editable-content:not(:focus) { } /******** footer part ********/ - -footer { - background-color: #333333; - color: #f5f5ef; - position: absolute; /*necessary to position it at the bottom in all cases*/ - bottom: 0; - width: 100%; - padding: 0.5em 1em 0.5em 1em; - margin: 0 auto; - display: inline-block; - line-height: 1.5; - height: 12em; /*adjust if there are additional links in the footer*/ -} - -footer nav ul { - list-style-type: none; - float: left; -} - -footer nav ul:first-child { - padding-left: 10px; -} - -footer nav h4 { - margin: 0; -} - -footer a[href] { +footer a { color: inherit; } -footer a[href]:hover { +footer a:hover { text-decoration: underline; + color: inherit; } diff --git a/root/templates/browse/recipe/index.tt b/root/templates/browse/recipe/index.tt index 1fbbd99b..a8af9e9f 100644 --- a/root/templates/browse/recipe/index.tt +++ b/root/templates/browse/recipe/index.tt @@ -4,26 +4,20 @@ ELSE; title = "Public Recipes"; END %] -[% IF show_all_url %] -
-

As a site admin you can view all recipes.

-
-[% ELSIF show_less_url %] -
-

These are all recipes. You can also view only yours.

-
-[% ELSIF user %] -
-

This list also includes private recipes which you are allowed to view.

-
-[% ELSE %] -
-

+

+

+ [% IF show_all_url %] + As a site admin you can view all recipes. + [% ELSIF show_less_url %] + These are all recipes. You can also view only yours. + [% ELSIF user %] + This list also includes private recipes which you are allowed to view. + [% ELSE %] These are only public recipes. - Sign in to view private recipes, too, or to import a recipe into one of your projects. + Sign in to view private recipes, too, or to import a recipe into one of your projects. + [% END %]

-[% END %]