diff --git a/lib/Coocook/Controller/PurchaseList.pm b/lib/Coocook/Controller/PurchaseList.pm index 7366c8f9..392bab2a 100644 --- a/lib/Coocook/Controller/PurchaseList.pm +++ b/lib/Coocook/Controller/PurchaseList.pm @@ -106,6 +106,17 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie $ingredient->{remove_url} = $c->project_uri( '/purchase_list/remove_ingredient', $ingredient->{id} ); } + + # TODO move business logic out of controller + # 4 <- 5 -> 6 + # 5 <- 5.1 -> 6 + # 5 <- 5.9 -> 6 + # 5 <- 6 -> 7 + my $value = $item->{value} + $item->{offset}; + $item->{next_higher_value} = int($value) + 1; + + $value == int($value) and $value--; + $item->{next_lower_value} = int($value); } } } diff --git a/lib/Coocook/Controller/Recipe.pm b/lib/Coocook/Controller/Recipe.pm index 6757879f..617b97ac 100644 --- a/lib/Coocook/Controller/Recipe.pm +++ b/lib/Coocook/Controller/Recipe.pm @@ -100,7 +100,8 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie ); $recipe->project->is_public - and $c->stash( public_url => $c->uri_for_action( '/browse/recipe/show', [ $recipe->id, $recipe->url_name ] ) ); + and $c->stash( + public_url => $c->uri_for_action( '/browse/recipe/show', [ $recipe->id, $recipe->url_name ] ) ); for my $ingredient ( @{ $c->stash->{ingredients} } ) { $ingredient->{reposition_url} = $c->project_uri( '/recipe/reposition', $ingredient->{id} ); diff --git a/root/static/css/local_bootstrap_modifications.css b/root/static/css/local_bootstrap_modifications.css index 33f52d75..cbab167e 100644 --- a/root/static/css/local_bootstrap_modifications.css +++ b/root/static/css/local_bootstrap_modifications.css @@ -1,17 +1,32 @@ - /* BOOSTRAP LOCAL CUSTOMIZATION */ +:root { + --cc-green: #4CAF50; + --cc-green-dark: #3A8E3D; + --cc-green-light: #6CBF6F; +} -/* -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); + +.mt-n3 { + margin-top: -1rem !important; +} + +textarea { + resize: vertical; +} + +.btn-sm.btn-quad { + padding: .25rem; +} + +.btn-icon-1 { + width: calc(24px + 1.5rem); +} + +.table colgroup + thead { + border-top: none !important; } @@ -60,15 +75,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 +101,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..e6db4876 100644 --- a/root/static/css/style.css +++ b/root/static/css/style.css @@ -16,161 +16,70 @@ 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*/ -} - -a[href] { - text-decoration:none; - color: #333333; -} - -main a[href] { - text-decoration:none; - color: #4CAF50; +main a { + color: var(--cc-green); } -main a[href]:hover, -main a[href]:active { - color: #333333; +main a:hover, +main a:focus { + color: var(--bs-dark); + text-decoration: underline; } a.btn-secondary { @@ -202,25 +111,10 @@ code { padding: 0.25em; } -.message { - border: 2px solid; - border-radius: 0.5em; - padding: 0 0.5em; - margin: 0.5em 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; -} - -input[type="number"] { - text-align: right; +button.alert-link { + background: transparent; + border: none; + padding: 0; } /*
  • s with checkbox inside should not have any bullet point */ @@ -243,10 +137,6 @@ table td input[type="checkbox"]:first-child:last-child { table td.right-align { text-align: right } -select:hover, select:active { - box-shadow: 2px 2px 3px grey; -} - fieldset{ border: 1px solid #333333; } @@ -303,63 +193,24 @@ ul { * see https://stackoverflow.com/a/710264/498634 */ } -/* incognito text input fields that don't clutter the page until they are focused - * see https://webapphuddle.com/inline-edit-design/ */ -.editable-content { - text-align: right; -} -.editable-content:not(:focus) { - border: 1px solid grey; - border-radius: 0.25em; - background-color: inherit; - box-shadow: none; +#pl-editor { + min-width: 1150px; } -input[type=number].editable-content:not(:focus)::-webkit-inner-spin-button, -input[type=number].editable-content:not(:focus)::-webkit-outer-spin-button { - -webkit-appearance: none; -} -input[type=number].editable-content:not(:focus) { - -moz-appearance: textfield; +/* unstyled list without a specific type */ +ul.list-style-type-none { + list-style-type:none; + padding-left: 0; } -.hidden { - display: none; -} /******** 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/static/js/script.js b/root/static/js/script.js index 6ef9aa81..e7d76c14 100644 --- a/root/static/js/script.js +++ b/root/static/js/script.js @@ -34,7 +34,7 @@ document.querySelectorAll("textarea.with-markdown-preview, input[type=text].with-markdown-preview").forEach( elem => { let row = elem.parentNode.parentNode; let col = document.createElement("div"); - col.className = "col-sm-6"; + col.className = "col-md-6"; let preview = document.createElement("div"); preview.className = "markdown-preview"; 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 %]