From d1b12c6ccf99eea4f1fd389a7b7642df4f9cb7db Mon Sep 17 00:00:00 2001 From: Maxime Date: Sun, 26 Jan 2020 19:27:58 +0100 Subject: [PATCH] Interface overhaul --- appinfo/routes.php | 1 + css/style.css | 108 ++++++++------ img/favicon.png | Bin 0 -> 775 bytes img/favicon.svg | 66 +++++++++ js/script.js | 29 ++-- lib/Controller/PageController.php | 16 ++- templates/content/edit.php | 227 +++++++++++++++++------------- templates/content/recipe.php | 102 ++++++++++---- templates/index.php | 13 +- templates/navigation/home.php | 12 ++ templates/navigation/index.php | 13 -- 11 files changed, 384 insertions(+), 203 deletions(-) create mode 100644 img/favicon.png create mode 100755 img/favicon.svg create mode 100644 templates/navigation/home.php diff --git a/appinfo/routes.php b/appinfo/routes.php index 77d6f8cf..18802586 100755 --- a/appinfo/routes.php +++ b/appinfo/routes.php @@ -10,6 +10,7 @@ return [ 'routes' => [ ['name' => 'page#index', 'url' => '/', 'verb' => 'GET'], + ['name' => 'page#home', 'url' => '/home', 'verb' => 'GET'], ['name' => 'page#recipe', 'url' => '/recipe', 'verb' => 'GET'], ['name' => 'page#edit', 'url' => '/edit', 'verb' => 'GET'], ['name' => 'recipe#index', 'url' => '/recipes', 'verb' => 'GET'], diff --git a/css/style.css b/css/style.css index ffdd65c5..cae4d9ac 100755 --- a/css/style.css +++ b/css/style.css @@ -12,26 +12,15 @@ #app-navigation .app-navigation-create { padding: 10px; } - #app-navigation #clear-recipe-search { - border-top: 1px solid var(--color-border-dark); - border-bottom: 1px solid var(--color-border-dark); - padding: 0 15px; - } - #app-navigation input:hover ~ #clear-recipe-search, - #app-navigation input:focus ~ #clear-recipe-search { - border-color: var(--color-primary-element); - } - #app-navigation .app-navigation-create .button { + display: inline-block; width: 100%; - padding: 6px 12px; - padding-left: 12px; + padding: 10px; padding-left: 34px; + background-position: 10px center; + text-align: left; margin: 0; - border-radius: var(--border-radius); - background-position: left 9px center; - z-index: 2; } #app-navigation select { @@ -47,7 +36,7 @@ #app-navigation .app-navigation-new:not(:first-child) { padding-top: 0; } - + #app-navigation #create-recipe > button { height: 40px !important; } @@ -61,7 +50,7 @@ border-right-width: 0; flex-basis: 0; } - + #app-navigation .app-navigation-new button { border-radius: 0 var(--border-radius) var(--border-radius) 0; padding: 0 !important; @@ -90,7 +79,7 @@ background-position: left 9px center; z-index: 2; } - + #app-settings input[type="text"], #app-settings input[type="number"], #app-settings .button { @@ -107,25 +96,36 @@ #app-content-wrapper { flex-wrap: wrap; - padding: 2em; } + .home { + padding: 1rem; + } + + .home .feature { + background-position: left top; + min-height: 32px; + padding-left: 32px; + margin-top: 1em; + } + + .loader { + text-align: center; + flex-basis: 100%; + padding-top: 50px; + } + + #controls { + flex-basis: 100%; + } + #controls .pull-right { + display: inline-flex; + flex-grow: 100; + flex-direction: row-reverse; + } + #app-content-wrapper header { flex-basis: 100%; - margin-bottom: 1rem; - line-height: 1.5; } - #app-content-wrapper header .recipe-toolbar { - display: flex; - justify-content: flex-end; - } - - #app-content-wrapper header .recipe-toolbar .button { - width: 40px; - height: 40px; - line-height: 40px; - text-align: center; - } - #app-content-wrapper header img { max-width: 100%; max-height: 40vh; @@ -154,6 +154,11 @@ vertical-align: middle; } + #app-content-wrapper .recipe-content { + padding: 1rem; + flex-basis: 100%; + } + #app-content-wrapper main { flex-basis: calc(100% - 22rem); } @@ -169,11 +174,14 @@ #app-content-wrapper form { width: 100%; } + #app-content-wrapper form .recipe-edit { + padding: 1rem; + } #app-content-wrapper form fieldset { margin-bottom: 1em; width: 100%; } - + #app-content-wrapper form fieldset > input { width: calc(100% - 11em); margin: 0; @@ -185,7 +193,7 @@ border-bottom-right-radius: 0; border-right: 0; } - + #app-content-wrapper form fieldset > input[name="image"] + button { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); @@ -194,7 +202,7 @@ width: 3em; margin: 0; } - + #app-content-wrapper form fieldset > input[name="image"] + button > * { pointer-events: none; } @@ -205,7 +213,7 @@ line-height: 18px; font-weight: bold; } - + #app-content-wrapper form fieldset ul label input[type="checkbox"] { margin-left: 1em; vertical-align: middle; @@ -216,26 +224,36 @@ margin-top: 1em; padding-left: 1em; } - + #app-content-wrapper form fieldset > ul > li > input { - width: calc(100% - 3em); + width: 100%; margin: 0 0 1em 0; } - + + #app-content-wrapper form fieldset > ul > li > button { + position: absolute; + right: 10px; + margin-top: 8px; + margin-right: 9px; + z-index: 10; + } + #app-content-wrapper form fieldset > ul > li > textarea { width: calc(100% - 3em); margin: 0; height: 10em; resize: none; } - - #app-content-wrapper form fieldset > ul button { + + #app-content-wrapper form fieldset button { border: 0; background-color: transparent; position: relative; - top: -2px; } - + #app-content-wrapper form fieldset button.right { + float: right; + } + #app-content-wrapper form button[type="submit"] { margin-left: auto; display: block; @@ -261,7 +279,7 @@ #app-content { margin-left: 0 !important; } - + #app-content header img { display: none !important; } diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..aafd18e22cd155d06413fcadfb0af29d74565c70 GIT binary patch literal 775 zcmV+i1Ni)jP)8FWQhbW?9;ba!ELWdL_~cP?peYja~^ zaAhuUa%Y?FJQ@H10)$CKK~z|U?U!9hQ(+j#fA86*Q|G2D6SWUNR^3UFOH1owRJe~VGu-CU_n=1rYRI;Ij9gRCW)DIbMDOTbfMF2?rhpV z`k?>K;eB78_y2nzp7Wgd2*SG2e-woaKpjv(X5Yk?n0)USG+XyaZ$W%qj zEv_|O7K-%=9v)XWPoO#p zFr*65VlBm#yJmBMLMc^qfQE`+KSNpoVhb+o0I4V;fJQ8|35^tf5;abTw22lwZ5#RS zn_nuh_Wcz&C+FB=%FPbId24CZ_{@%yv>Au>XV!o>qP-@PM-F8M;KgTm(m?0r9Ane| z%mB1JA7#kpRSg=OmO1(8BOxVa|M&poo&dY=4&$4TpW=f(BfJ@(P2F7$03f7*qH@A? zoIEK&wv-ltR1%V~5v^9|o{dsnyxbkzn#!py&CeddkjoqO)|}m0LhUMJ|BV{>5AfFm zcz&b5TLLktwkikXw-~?5HzH}=%K1SF5$smm=!tV`#oVCF%NMtt5a4l~xF2&tUXI3m z<`udYZkN|z-2`zdHb^H4PS>ty`#L=Uu9*Oiw-dPi$uBH+i;2cfg=i&#+aKh?@Fbt6 zBJK|gowV1tEnjat1`Z>XR=`Rc{+3ka0R~X$qP@Nk;3umfzkXF3hid=;002ovPDHLk FV1l>pSF8X4 literal 0 HcmV?d00001 diff --git a/img/favicon.svg b/img/favicon.svg new file mode 100755 index 00000000..d79edc40 --- /dev/null +++ b/img/favicon.svg @@ -0,0 +1,66 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/js/script.js b/js/script.js index 50ea72dc..651235c2 100755 --- a/js/script.js +++ b/js/script.js @@ -152,8 +152,7 @@ var Content = function (cookbook) { var isEditor = location.hash.indexOf('|edit') > -1 || location.hash === '#new'; if(!recipeId && !isEditor) { - $('#app-content-wrapper').html(t(appName, 'Please pick a recipe')); - + $('#app-content-wrapper').load(cookbook._baseUrl + '/home'); } else { $.ajax({ url: cookbook._baseUrl + '/' + (isEditor ? 'edit' : 'recipe') + (isEditor && !recipeId ? '?new' : '?id=' + recipeId), @@ -289,11 +288,11 @@ var Content = function (cookbook) { self.onAddListItem = function(e) { e.preventDefault(); - var $ul = $(e.currentTarget).parents('ul'); - var $add = $ul.find('.icon-add'); + var $ul = $(e.currentTarget).closest('fieldset').children('ul'); var template = $ul.find('template').html(); + var $item = $(template); - var $item = $(template).insertBefore($add); + $ul.append($item); $item.find('input').focus(); @@ -330,6 +329,8 @@ var Content = function (cookbook) { var Nav = function (cookbook) { var self = this; + self.query = null; + /** * Event: Change recipe folder */ @@ -382,16 +383,14 @@ var Nav = function (cookbook) { self.onCategorizeRecipes = function(e) { e.preventDefault(); - $('#find-recipes input').val(''); - self.render(); }; /** * Event: Submit new search query */ - self.onFindRecipes = function(e) { - e.preventDefault(); + self.onFindRecipes = function(query) { + self.query = query; $('#categorize-recipes select').val(null); @@ -416,12 +415,10 @@ var Nav = function (cookbook) { /** * Event: Clear recipe search */ - self.onClearRecipeSearch = function(e) { - e.preventDefault(); + self.onClearRecipeSearch = function() { + self.query = null; - $('#find-recipes input').val(''); - - self.onFindRecipes(e); + self.render(); } /** @@ -430,7 +427,7 @@ var Nav = function (cookbook) { * @return {String} Keywords */ self.getKeywords = function() { - return [$('#categorize-recipes select').val(), $('#find-recipes input').val()].join(','); + return [$('#categorize-recipes select').val(), self.query].join(','); } /** @@ -504,6 +501,8 @@ var Nav = function (cookbook) { $('#reindex-recipes').click(self.onReindexRecipes); }; + + this.search = new OCA.Search(self.onFindRecipes, self.onClearRecipeSearch); } var cookbook = new Cookbook(OC.generateUrl('/apps/cookbook')); diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php index 32b25921..422f6f08 100755 --- a/lib/Controller/PageController.php +++ b/lib/Controller/PageController.php @@ -45,6 +45,18 @@ class PageController extends Controller return new TemplateResponse($this->appName, 'index', $view_data); // templates/index.php } + /** + * @NoAdminRequired + * @NoCSRFRequired + */ + public function home() + { + $response = new TemplateResponse($this->appName, 'navigation/home'); + $response->renderAs('blank'); + + return $response; + } + /** * @NoAdminRequired * @NoCSRFRequired @@ -83,11 +95,11 @@ class PageController extends Controller if (isset($_GET['id'])) { $recipe = $this->service->getRecipeById($_GET['id']); - + if(!$recipe) { throw new \Exception('Recipe ' . $_GET['id'] . ' not found'); } $recipe['id'] = $_GET['id']; - + } $response = new TemplateResponse($this->appName, 'content/edit', $recipe); diff --git a/templates/content/edit.php b/templates/content/edit.php index 32f1df5f..daeb6d76 100755 --- a/templates/content/edit.php +++ b/templates/content/edit.php @@ -1,121 +1,156 @@ -
-
- -
-
-
-
- - -
+
+
+ +
+ t('Home')); ?> +
+
+ t('New recipe')); ?> +
+
+
+ +
-
- - -
+
+ + + t('Cancel')); ?> + +
+
-
- - -
+
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- -
    - - - $tool) { ?> +
    + + +
    + +
    + + +
    + +
    + + +
      + + + $tool) { ?> +
    • + + +
      • + - - -
    -
    - -
    - +
+
-
    - - - $ingredient) { ?> +
    + + +
      + + + $ingredient) { ?> +
    • + + +
      • + - - -
    -
    +
+ -
- - -
    - - - $step) { ?> +
    + + +
      + + + $step) { ?> +
    • + + +
      • + - - -
    -
    - - +
+
+
diff --git a/templates/content/recipe.php b/templates/content/recipe.php index 3734dcec..33353315 100755 --- a/templates/content/recipe.php +++ b/templates/content/recipe.php @@ -1,16 +1,58 @@ -
- - - - -
- - - +
+
+ +
+ t('Home')); ?> +
+
+ +
+
+ + + t('Edit recipe')); ?> + +
+
+ +
+
+ +
+
-

- + +
+ +
+ + +

t('Source')); ?>:

@@ -47,29 +89,35 @@
-
-
    -

    t('Instructions')); ?>

    + +
    +
      +

      t('Instructions')); ?>

      - -
      2. - -
    -
    + +
    2. + +
+
+ diff --git a/templates/index.php b/templates/index.php index 2e8e659a..9098ecdc 100755 --- a/templates/index.php +++ b/templates/index.php @@ -4,14 +4,17 @@ style('cookbook', 'style'); ?>
-
+
inc('navigation/index')); ?> inc('settings/index')); ?> -
+
-
+
-
-
+
+ +
+
+
diff --git a/templates/navigation/home.php b/templates/navigation/home.php new file mode 100644 index 00000000..17640b49 --- /dev/null +++ b/templates/navigation/home.php @@ -0,0 +1,12 @@ +
+

t('Cookbook')); ?>

+
+ t('Create a new recipe by clicking on "Create recipe" in the app navigation.')); ?> +
+
+ t('Organize your recipes with tags.')); ?> +
+
+ t('Search your favorite recipe with the global search.')); ?> +
+
diff --git a/templates/navigation/index.php b/templates/navigation/index.php index 1c6cd483..e9416424 100755 --- a/templates/navigation/index.php +++ b/templates/navigation/index.php @@ -10,19 +10,6 @@ -
- - - - - - - - -
-