Issue #1164784 by emma.maria, kattekrab, tadityar, DickJohnson, vermario, luco, Jeff Burnz, davidhernandez, David_Rothstein, webchick, Bojhan, LewisNyman, alexpott: “Triptych” term is not widely understood; add "Featured top" and "Featured bottom"

8.0.x
webchick 2015-02-05 23:21:55 -08:00
parent e45522cfd9
commit a7c37e03ee
11 changed files with 110 additions and 139 deletions

View File

@ -20,16 +20,17 @@ regions:
help: Help
page_top: 'Page top'
page_bottom: 'Page bottom'
featured: Featured
featured_top: 'Featured top'
breadcrumb: Breadcrumb
content: Content
sidebar_first: 'Sidebar first'
sidebar_second: 'Sidebar second'
triptych_first: 'Triptych first'
triptych_middle: 'Triptych middle'
triptych_last: 'Triptych last'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer_first: 'Footer first'
footer_second: 'Footer second'
footer_third: 'Footer third'
footer_fourth: 'Footer fourth'
footer_fifth: 'Footer fifth'

View File

@ -15,7 +15,7 @@ global-styling:
css/components/contextual.css: {}
# @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {}
css/components/featured.css: {}
css/components/featured-top.css: {}
css/components/footer.css: {}
css/components/form.css: {}
css/components/forum.css: {}
@ -35,7 +35,7 @@ global-styling:
css/components/table.css: {}
css/components/tabs.css: {}
css/components/tips.css: {}
css/components/triptych.css: {}
css/components/featured-bottom.css: {}
css/components/user.css: {}
# @see https://www.drupal.org/node/2389735
css/components/vertical-tabs.component.css: {}

View File

@ -31,8 +31,8 @@ function bartik_preprocess_html(&$variables) {
$variables['attributes']['class'][] = 'layout-no-sidebars';
}
if (!empty($variables['page']['featured'])) {
$variables['attributes']['class'][] = 'featured';
if (!empty($variables['page']['featured_top'])) {
$variables['attributes']['class'][] = 'featured-top';
}
}

View File

@ -24,7 +24,7 @@
text-align: center;
text-shadow: none;
}
#featured .demo-block {
#featured-top .demo-block {
font-size: 0.55em;
}
#header .demo-block {

View File

@ -0,0 +1,55 @@
/* ----------------- Featured Bottom ----------------- */
#featured-bottom-wrapper {
background-color: #f0f0f0;
background: rgba(30, 50, 10, 0.08);
border-top: 1px solid #e7e7e7;
}
#featured-bottom h2 {
color: #000;
font-size: 1.4em;
margin-bottom: 0.6em;
text-shadow: 0 1px 0 #fff;
text-align: center;
line-height: 1;
}
#featured-bottom .block {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #dfdfdf;
line-height: 1.3;
}
#featured-bottom .block:last-child {
border-bottom: none;
}
#featured-bottom .block ul li,
#featured-bottom .block ol li {
list-style: none;
}
#featured-bottom .block ul,
#featured-bottom .block ol {
padding-left: 0;
}
#featured-bottom #block-user-login .form-text {
width: 185px;
}
#featured-bottom #block-user-online p {
margin-bottom: 0;
}
#featured-bottom #block-node-syndicate h2 {
overflow: hidden;
width: 0;
height: 0;
}
#featured-bottom-third #block-node-syndicate {
text-align: right;
}
#featured-bottom #block-search-form .form-type-search input {
width: 185px;
}
#featured-bottom-second #block-system-powered-by {
text-align: center;
}
#featured-bottom-third #block-system-powered-by {
text-align: right;
}

View File

@ -1,6 +1,6 @@
/* ----------------- Featured ----------------- */
#featured {
#featured-top {
text-align: center;
font-size: 1.2em;
font-weight: normal;
@ -12,21 +12,11 @@
border-bottom: 1px solid #e7e7e7;
text-shadow: 1px 1px #fff;
}
@media all and (min-width: 520px) {
#featured {
font-size: 1.643em;
}
}
#featured h2 {
#featured-top h2 {
font-size: 1.2em;
line-height: 1;
}
@media all and (min-width: 520px) {
#featured h2 {
font-size: 1.174em;
}
}
#featured p {
#featured-top p {
margin: 0;
padding: 0;
}

View File

@ -5,7 +5,7 @@
margin: 0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.featured #messages {
.featured-top #messages {
background: #f0f0f0;
background: rgba(30, 50, 10, 0.08);
}

View File

@ -1,75 +0,0 @@
/* ----------------- Triptych ----------------- */
#triptych-wrapper {
background-color: #f0f0f0;
background: rgba(30, 50, 10, 0.08);
border-top: 1px solid #e7e7e7;
}
#triptych h2 {
color: #000;
font-size: 1.4em;
margin-bottom: 0.6em;
text-shadow: 0 1px 0 #fff;
text-align: center;
line-height: 1;
}
#triptych .block {
margin-bottom: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #dfdfdf;
line-height: 1.3;
}
@media all and (min-width: 520px) {
#triptych h2 {
font-size: 1.714em;
margin-bottom: 0.9em;
}
#triptych .block {
margin-bottom: 2em;
padding-bottom: 2em;
}
}
#triptych .block:last-child {
border-bottom: none;
}
#triptych .block ul li,
#triptych .block ol li {
list-style: none;
}
#triptych .block ul,
#triptych .block ol {
padding-left: 0; /* LTR */
}
[dir="rtl"] #triptych .block ul,
[dir="rtl"] #triptych .block ol {
padding-right: 0;
}
#triptych #block-user-login .form-text {
width: 185px;
}
#triptych #block-user-online p {
margin-bottom: 0;
}
#triptych #block-node-syndicate h2 {
overflow: hidden;
width: 0;
height: 0;
}
#triptych-last #block-node-syndicate {
text-align: right; /* LTR */
}
[dir="rtl"] #triptych-last #block-node-syndicate {
text-align: left;
}
#triptych #block-search-form .form-type-search input {
width: 185px;
}
#triptych-middle #block-system-powered-by {
text-align: center;
}
#triptych-last #block-system-powered-by {
text-align: right; /* LTR */
}
[dir="rtl"] #triptych-last #block-system-powered-by {
text-align: left;
}

View File

@ -10,10 +10,10 @@ body,
min-height: 100%;
}
#header div.section,
#featured aside.section,
#featured-top aside.section,
#messages div.section,
#main,
#triptych,
#featured-bottom,
#footer-columns,
#site-footer__bottom {
width: 100%;
@ -59,9 +59,9 @@ body,
box-sizing: border-box;
padding: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
.region-featured-bottom-first,
.region-featured-bottom-second,
.region-featured-bottom-third {
box-sizing: border-box;
padding: 0 20px 0;
}
@ -76,9 +76,9 @@ body,
@media all and (min-width: 560px) and (max-width: 850px) {
#sidebar-first,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-featured-bottom-first,
.region-featured-bottom-second,
.region-featured-bottom-third,
.region-footer-first,
.region-footer-second,
.region-footer-third,
@ -88,9 +88,9 @@ body,
position: relative;
}
[dir="rtl"] #sidebar-first,
[dir="rtl"] .region-triptych-first,
[dir="rtl"] .region-triptych-middle,
[dir="rtl"] .region-triptych-last,
[dir="rtl"] .region-featured-bottom-first,
[dir="rtl"] .region-featured-bottom-second,
[dir="rtl"] .region-featured-bottom-third,
[dir="rtl"] .region-footer-first,
[dir="rtl"] .region-footer-second,
[dir="rtl"] .region-footer-third,
@ -117,14 +117,14 @@ body,
[dir="rtl"] .layout-one-sidebar #sidebar-second {
margin-right: 0;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
.region-featured-bottom-first,
.region-featured-bottom-second,
.region-featured-bottom-third {
box-sizing: border-box;
padding: 20px 15px 30px;
width: 33%;
}
.region-triptych-middle {
.region-featured-bottom-second {
padding: 20px 5px 30px;
}
.region-footer-first,
@ -147,10 +147,10 @@ body,
@media all and (min-width: 851px) {
#header div.section,
#featured aside.section,
#featured-top aside.section,
#messages div.section,
#main,
#triptych,
#featured-bottom,
#footer-columns,
#site-footer__bottom {
max-width: 1290px;
@ -158,9 +158,9 @@ body,
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-featured-bottom-first,
.region-featured-bottom-second,
.region-featured-bottom-third,
.region-footer-first,
.region-footer-second,
.region-footer-third,
@ -172,9 +172,9 @@ body,
[dir="rtl"] #content,
[dir="rtl"] #sidebar-first,
[dir="rtl"] #sidebar-second,
[dir="rtl"] .region-triptych-first,
[dir="rtl"] .region-triptych-middle,
[dir="rtl"] .region-triptych-last,
[dir="rtl"] .region-featured-bottom-first,
[dir="rtl"] .region-featured-bottom-second,
[dir="rtl"] .region-featured-bottom-third,
[dir="rtl"] .region-footer-first,
[dir="rtl"] .region-footer-second,
[dir="rtl"] .region-footer-third,
@ -223,9 +223,9 @@ body,
[dir="rtl"] #sidebar-second {
margin-right: -25%;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
.region-featured-bottom-first,
.region-featured-bottom-second,
.region-featured-bottom-third {
width: 33%;
}
.region-footer-first,

View File

@ -27,13 +27,13 @@ body {
.two-sidebars #content {
width: 100%;
}
#triptych-wrapper {
#featured-bottom-wrapper {
width: 960px;
margin: 0;
padding: 0;
border: none;
}
#triptych-first, #triptych-middle, #triptych-last {
#featured-bottom-first, #featured-bottom-second, #featured-bottom-third {
width: 250px;
}

View File

@ -52,14 +52,14 @@
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.featured: Items for the featured region.
* - page.featured_top: Items for the featured top region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.triptych_first: Items for the first triptych.
* - page.triptych_middle: Items for the middle triptych.
* - page.triptych_last: Items for the last triptych.
* - page.featured_bottom_first: Items for the first featured bottom region.
* - page.featured_bottom_second: Items for the second featured bottom region.
* - page.featured_bottom_third: Items for the third featured bottom region.
* - page.footer_first: Items for the first footer column.
* - page.footer_second: Items for the second footer column.
* - page.footer_third: Items for the third footer column.
@ -114,10 +114,10 @@
<div class="section clearfix">{{ messages }}</div>
</div>
{% endif %}
{% if page.featured %}
<div id="featured">
{% if page.featured_top %}
<div id="featured-top">
<aside class="section clearfix" role="complementary">
{{ page.featured }}
{{ page.featured_top }}
</aside>
</div>
{% endif %}
@ -162,12 +162,12 @@
{% endif %}
</div>
</div>
{% if page.triptych_first or page.triptych_middle or page.triptych_last %}
<div id="triptych-wrapper">
<aside id="triptych" class="clearfix" role="complementary">
{{ page.triptych_first }}
{{ page.triptych_middle }}
{{ page.triptych_last }}
{% if page.featured_bottom_first or page.featured_bottom_second or page.featured_bottom_third %}
<div id="featured-bottom-wrapper">
<aside id="featured-bottom" class="clearfix" role="complementary">
{{ page.featured_bottom_first }}
{{ page.featured_bottom_second }}
{{ page.featured_bottom_third }}
</aside>
</div>
{% endif %}