Merge pull request #205 from quantacms/dario-dev

updated generic profile
quantacms · Nov 20, 2018 · d38b4f7 · d38b4f7
2 parents 04136e6 + e261f11
commit d38b4f7
Show file tree

Hide file tree

Showing 22 changed files with 85 additions and 49 deletions.
diff --git a/engine/modules/core/engine/css/engine.css b/engine/modules/core/engine/css/engine.css
@@ -306,16 +306,19 @@ ul.gallery.list {
 
 ul.breadcrumb {
     text-align: left;
+    padding: 0;
 }
 
 ul.breadcrumb li {
     display: inline-block;
     padding: 0;
     margin: 0;
-    margin-left: 4px;
     border-right: 1px solid #aaa;
     padding-right: 4px;
 }
+ul.breadcrumb li + li {
+    margin-left: 4px;
+}
 
 .description {
     font-style: italic;

diff --git a/engine/modules/core/grid/css/grid.css b/engine/modules/core/grid/css/grid.css
@@ -11,7 +11,9 @@
 /* MAIN PAGE structure: */
 /* header + #grid-main(max-height) + footer */
 
-body.grid.three-rows > footer {
+body.grid.three-rows > header,
+body.grid.three-rows > footer,
+body.grid.three-rows #grid-main {
   grid-gap: 0;
 }
 

diff --git a/engine/modules/core/grid/css/grid_all.css b/engine/modules/core/grid/css/grid_all.css
@@ -68,6 +68,22 @@ ul.grid {
   text-align: right;
 }
 
+.align-content-start {
+  align-content: start;
+}
+
+.align-content-center {
+  align-content: center;
+}
+
+.align-content-end {
+  align-items: end;
+}
+
+.align-content-stretch {
+  align-items: stretch;
+}
+
 .align-items-start {
   align-items: start;
 }

diff --git a/engine/modules/core/grid/css/no_grid.css b/engine/modules/core/grid/css/no_grid.css
@@ -8,6 +8,18 @@
   /*flex-grow: 1;*/
 }
 
+
+/* "three-rows" style: */
+/* MAIN PAGE structure: */
+/* header + #grid-main(max-height) + footer */
+
+body.grid.three-rows #grid-main {
+  flex-grow: 1;
+  align-content: start;
+}
+
+
+
 .grid {
   display: flex;
   flex-wrap: wrap;

diff --git a/engine/modules/core/page/page.qtags.inc b/engine/modules/core/page/page.qtags.inc
@@ -268,12 +268,13 @@ function qtag_JSON($env, $target, &$attributes) {
  *   The rendered qtag.
  */
 function qtag_HEADER($env, $target, &$attributes) {
-  $attributes['wrapper_html_tag'] = 'header';
-  $attributes['wrapper_id'] = isset($attributes['header_id']) ? $attributes['header_id'] : '';
+  $attributes['grid'] = 'grid' . (!empty($attributes['grid']) ? ' ' . $attributes['grid'] : '');
+  $attributes['grid_html_tag'] = 'header';
+  $attributes['grid_id'] = isset($attributes['header_id']) ? $attributes['header_id'] : '';
+
   $target_header = isset($target) ? $target : 'header';
-  $target = qtag_CONTENT($env, $target_header, $attributes);
 
-  return qtag_WRAPPER($env, $target, $attributes);
+  return qtag_CONTENT($env, $target_header, $attributes);
 }
 
 

diff --git a/...neric/_components/_content-basic/tpl.html → ...components/_content-basic-layout/tpl.html b/...neric/_components/_content-basic/tpl.html → ...components/_content-basic-layout/tpl.html
diff --git a/profiles/generic/_components/_content-blog/tpl.html b/profiles/generic/_components/_content-blog/tpl.html
@@ -3,4 +3,4 @@ <h1>[TITLE]</h1>
 <!-- Add the teaser -->
 <h2>[TEASER]</h2>
 <!-- Add a blog of elements -->
-[BLOG|grid=content-blog p-x-1 p-y3]
+[BLOG|grid=content-blog]
diff --git a/profiles/generic/_components/_content-carousel/tpl.html b/profiles/generic/_components/_content-carousel/tpl.html
@@ -3,4 +3,4 @@ <h1>[TITLE]</h1>
 <!-- Add the body -->
 [BODY]
 <!-- Add a carousel of elements -->
-[CAROUSEL|grid=content-carousel p-x-1 p-y3]
+[CAROUSEL|grid=content-carousel]
diff --git a/profiles/generic/_components/_footer/tpl.html b/profiles/generic/_components/_footer/tpl.html
@@ -1,2 +1,2 @@
-[WRAPPER|wrapper_html_tag=section|wrapper_class=grid grid-start-lg-3 grid-span-lg-8 p-y3 text-md-left:{CONTENT:_footer-blocks}]
+[WRAPPER|wrapper_html_tag=section|wrapper_class=grid grid-start-lg-3 grid-span-lg-8 p-x-1 p-y-3 text-md-left:{CONTENT:_footer-blocks}]
 [WRAPPER|wrapper_class=footer-end p-1:{CONTENT:_footer-end}]
diff --git a/profiles/generic/_components/_header/tpl.html b/profiles/generic/_components/_header/tpl.html
@@ -1,2 +1,3 @@
 [CONTENT:_logo]
-[MENU|menu_class=menu|links={LINK|title=Main page:home}---{LINK:fruits}---{LINK:animals}---{LINK:about-grid}]
+
+[MENU|grid_id=header-menus|grid=grid-span-md-9 p-t-1 p-t-md-0 text-md-right|menu_class=menu|links={LINK|title=Main page:home}---{LINK:fruits}---{LINK:animals}---{LINK:about-grid}]
diff --git a/profiles/generic/_components/_logo/tpl.html b/profiles/generic/_components/_logo/tpl.html
@@ -1 +1 @@
-[LINK|link_id=logo|link_title=Homepage|title={IMGTHUMB|140xauto|node=_logo:logo.png}:home]
+[LINK|link_id=logo|link_class=grid-span-md-3 text-md-left|link_title=Homepage|title={IMGTHUMB|140xauto|node=_logo:logo.png}:home]
diff --git a/profiles/generic/_components/_side-first/_side-first-inner/tpl.html b/profiles/generic/_components/_side-first/_side-first-inner/tpl.html
@@ -0,0 +1,2 @@
+<h2>First sidebar</h2>
+[CONTENT:_promo]
diff --git a/profiles/generic/_components/_side-first/tpl.html b/profiles/generic/_components/_side-first/tpl.html
@@ -1,2 +1 @@
-<h1>First Side</h1>
-[CONTENT:_promo]
+[WRAPPER|wrapper_class=inner:{CONTENT:_side-first-inner}]
diff --git a/profiles/generic/_components/_side-second/_side-second-inner/tpl.html b/profiles/generic/_components/_side-second/_side-second-inner/tpl.html
@@ -0,0 +1,3 @@
+<h2>Second sidebar</h2>
+[LIST:animals]
+[LIST:fruits]
diff --git a/profiles/generic/_components/_side-second/tpl.html b/profiles/generic/_components/_side-second/tpl.html
@@ -1,7 +1 @@
-<h1>Second Side</h1>
-<ul>
-  <li>Related content 1</li>
-  <li>Related content 2</li>
-  <li>Related content 3</li>
-  <li>Related content 4</li>
-</ul>
+[WRAPPER|wrapper_class=inner:{CONTENT:_side-second-inner}]
diff --git a/profiles/generic/_example_data/animals/tpl--.html b/profiles/generic/_example_data/animals/tpl--.html
@@ -1,4 +1,4 @@
 <!-- This template will apply to sub-items of "animals" (i.e. "maine-coon", "labrador") -->
-[BREADCRUMB]
+[WRAPPER|wrapper_class=p-x-1:{BREADCRUMB}]
 
-[MAIN|grid=grid-start-lg-3 grid-span-lg-8 p-x-1 p-y-3:_content-basic]
+[CONTENT|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6  p-x-1 p-y-3:_content-basic-layout]
diff --git a/profiles/generic/_example_data/animals/tpl.html b/profiles/generic/_example_data/animals/tpl.html
@@ -1,2 +1,2 @@
 <!-- This is the template for the animals page -->
-[MAIN|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6 p-x-1 p-y-0:_content-blog]
+[CONTENT|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6 p-x-1 p-y-3:_content-blog]
diff --git a/profiles/generic/_example_data/fruits/tpl.html b/profiles/generic/_example_data/fruits/tpl.html
@@ -1,2 +1,2 @@
 <!-- This is the template for the fruits page -->
-[MAIN|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6 p-x-1 p-y-0:_content-carousel]
+[CONTENT|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6 p-x-1 p-y-3:_content-carousel]
diff --git a/profiles/generic/_example_data/tpl--.html b/profiles/generic/_example_data/tpl--.html
@@ -1,4 +1,4 @@
 <!-- This template will apply to sub-items of "animals" and "fruits" (i.e. "cat", "apple") -->
-[BREADCRUMB]
+[WRAPPER|wrapper_class=p-x-1:{BREADCRUMB}]
 
-[MAIN|grid=grid-start-lg-3 grid-span-lg-8 p-x-1 p-y-3:_content-advanced]
+[CONTENT|grid=grid-start-md-3 grid-start-lg-4 grid-span-md-8 grid-span-lg-6 p-x-1 p-y-3:_content-advanced]
diff --git a/profiles/generic/assets/css/style.css b/profiles/generic/assets/css/style.css
@@ -78,7 +78,6 @@ footer a {
 
 h1 {
     margin-bottom: 20px;
-    margin-top: 20px;
 }
 
 body.page-animals {
@@ -89,8 +88,8 @@ body.page-fruits {
     background: #fff2c9;
 }
 
-body.page-animals main,
-body.page-fruits main {
+body.page-animals main > div,
+body.page-fruits main > div{
     background: #fff;
 }
 

diff --git a/profiles/generic/index.html b/profiles/generic/index.html
@@ -24,13 +24,13 @@
         [MESSAGES]
 
         <!-- Site's header -->
-        [HEADER:_header]
+        [HEADER|header_id=header|grid=p-1:_header]
 
         <!-- Currently viewed node's content -->
-        [CONTENT|grid_id=grid-main|grid=grid grid-container]
+        [MAIN|grid_id=grid-main]
 
         <!-- Site's footer -->
-        [FOOTER:_footer]
+        [FOOTER|footer_id=footer:_footer]
 
         [JS|runlast]
     </body>

diff --git a/profiles/generic/pages/tpl^.html b/profiles/generic/pages/tpl^.html
@@ -3,56 +3,60 @@
  Feel free to review all the inline comments, to better understand how things are done.
  Then, you can delete them :-)!
 
-===========
+==========
 Breadcrumb
-===========
+==========
 Display a breadcrumb of currently viewed node:
 order-lg--1 -> All elements have order:0 by default; setting order-lg--1 we set order:-1 only for "Large" mode. We need to do this because we set the 1st Side too as order-lg--1, so we have to set it also for Breadcrumb to mantain it before the 1st Side.
 
+p-x-1 -> set default single padding on X axis (left + right).
 -->
-[BREADCRUMB|grid=order-lg--1]
+[BREADCRUMB|grid=order-lg--1 p-x-1]
 
 <!--
-===========
+============
 Main content
-===========
+============
 We are giving those grid attributes to the main content:
 
-grid-start-lg-3 -> Start from cell "3" when in "Large" (desktop, laptop) mode.
+grid-start-lg-4 -> Start from line "4" when in "Large" (desktop, laptop) mode.
+grid-start-xl-3 -> Start from line "3" when in "Extra Large" (large desktop) mode.
 grid-span-md-8  -> Column span of 8 cells when in "Medium" (tablet) mode.
-p-x-1 -> set default single padding on column.
-p-y-3 -> set default triple padding on row.
+...
+p-x-1 -> set default single padding on X axis (left + right).
+p-y-3 -> set default triple padding on Y axis (top + bottom).
 
-The referenced node for content structure is _content-basic (see _components/_content-basic).
+The referenced node for content structure is _content-basic-layout (see _components/_content-basic-layout).
 -->
-[MAIN|grid=grid-start-lg-3 grid-span-md-8 p-x-1 p-y-3:_content-basic]
+[CONTENT|grid=grid-start-lg-4 grid-start-xl-3 grid-span-md-8 grid-span-lg-6 grid-span-xl-8 p-x-1 p-y-3:_content-basic-layout]
 
 <!--
 ===========
 1st Sidebar
 ===========
 We are giving those grid attributes to the first sidebar:
 order-lg--1 -> order:-1 before all elements with default order (0).
-grid-start-lg-1 -> Start from cell "1" when in "Large" (desktop, laptop) mode.
+grid-start-lg-1 -> Start from line "1" when in "Large" (desktop, laptop) mode.
 grid-span-md-4 -> Column span of 4 cells when in "Medium" (tablet) mode.
-p-x-1 -> set default single padding on column.
-p-y-3 -> set default triple padding on row.
+...
+p-x-1 -> set default single padding on X axis (left + right).
+p-y-3 -> set default triple padding on Y axis (top + bottom).
 text-left -> align text on left by default.
 
 The referenced node for content structure is _side-first (see _components/_side-first).
 -->
-[ASIDE|grid_id=side-first|grid=order-lg--1 grid-start-lg-1 grid-span-md-4 grid-span-lg-2 p-x-1 p-y-3 text-left:_side-first]
+[ASIDE|grid_id=side-first|grid=order-lg--1 grid-start-lg-1 grid-span-md-4 grid-span-lg-3 grid-span-xl-2 p-x-1 p-y-3 text-left:_side-first]
 
 <!--
 ===========
 2nd Sidebar
 ===========
 We are giving those grid attributes to the second sidebar:
 grid-span-lg-2  -> Column span of 2 cells when in "Large" (desktop, laptop) mode.
-p-x-1 -> set default single padding on column.
-p-y-3 -> set default triple padding on row.
+p-x-1 -> set default single padding on X axis (left + right).
+p-y-3 -> set default triple padding on Y axis (top + bottom).
 text-left -> align text on left by default.
 
 The referenced node for content structure is _side-second (see _components/_side-second).
 -->
-[ASIDE|grid_id=side-second|grid=grid-span-lg-2 p-x-1 p-y-3 text-left:_side-second]
+[ASIDE|grid_id=side-second|grid=grid-span-lg-3 grid-span-xl-2 p-x-1 p-y-3 text-left:_side-second]