Commit a6f42054 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Bug 1815829: Add styling to the new page header area

behatnotneeded

Change-Id: I0d5c7a3139b521e4b3b4c6e2a4488ba4b2c480a3
parent 7adb6e3b
.collection-nav {
background-color: $card-header-bg;
}
......@@ -18,6 +18,9 @@ $dashboard-widget-color: #FFFFFF;
$help-icon-color: #5b8fc8;
$rss-icon-color: #FE6500;
// Pages and collections page header
$pageheader-bg: #f0f5ea;
$theme-primary-color-light: #799152;
// LEGACY BOOTSTRAP 3 VARIABLES
......
......@@ -28,6 +28,5 @@
// Feature related sass. We avoid this where we can in favour of reusable components
@import "../features/dashboard-widget";
@import "../features/collection-navigation";
@import "../custom";
.collection-nav {
h2 {
font-size: 32px;
}
.collection-nav-btns {
@include media-breakpoint-up(lg) {
bottom: 14px;
}
}
}
......@@ -13,4 +13,3 @@
@import "../components/user-icon";
@import "../features/dashboard-widget";
@import "../features/collection-navigation";
.collection-nav {
h2 {
font-size: 38px;
}
.collection-nav-btns {
@include media-breakpoint-up(lg) {
bottom: 22px;
}
}
.collection-nav h2 {
font-size: 18px;
font-weight: 400;
}
......@@ -14,6 +14,9 @@ $arrow-link-background-color: #fff;
$dashboard-widget-bg: transparent;
$dashboard-widget-color: transparent;
// Pages and collections page header
$pageheader-bg: scale-color($theme-primary-color, $lightness: 95%);
// Legacy from Bootstrap 3
......
.collection-nav {
background-color: #f3f8fa;
border-top: 0;
border-radius: 0;
.prevpage {
color: $btn-primary-color;
background-color: $btn-primary-bg;
border-color: $btn-primary-border;
&:focus,
&:hover {
background-color: scale-color($btn-primary-bg, $lightness: 5%);
}
}
.prevpage,
.nextpage {
color: $btn-primary-color;
background-color: $btn-primary-bg;
......
......@@ -491,3 +491,21 @@ td.action-list-copy {
}
}
}
// Page/Collections pageactions btns
.pageactions {
margin-right: -1px;
.btn-group-vertical .btn {
&:last-child {
border-bottom-right-radius: 0;
}
&:first-child {
border-top-right-radius: 0;
}
&.dropdown-toggle {
border-bottom-right-radius: 0;
}
}
}
.collection-nav {
background-color: $card-header-bg;
padding: 10px;
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
border-radius: 3px;
padding: 0;
margin-top: 20px;
margin-bottom: 70px;
position: relative;
@include media-breakpoint-down(md) {
margin-bottom: 50px;
}
h2 {
font-weight: bold;
font-size: 30px;
font-size: 14px;
margin-top: 0;
padding-bottom: 10px;
@include media-breakpoint-up(lg) {
margin-right: 300px;
margin-bottom: 0;
border-bottom: 1px solid $list-group-border-color;
}
@include media-breakpoint-down(md) {
padding-bottom: 0;
}
}
.collection-nav-btns {
......@@ -22,8 +28,8 @@
@include media-breakpoint-up(lg) {
position: absolute;
right: 10px;
bottom: 12px;
right: 0px;
bottom: -1px;
}
}
.prevpage {
......
......@@ -179,3 +179,23 @@
}
}
}
// Pages pageaction btn dropdown-menu
.pageactions .dropdown-menu {
margin: 0;
padding: 0;
> li {
padding: 0;
> a {
padding: 5px 10px;
display: block;
&:hover,
&:focus {
text-decoration: none;
}
}
}
}
......@@ -173,3 +173,64 @@ body.presentation-iframe {
}
}
}
// Pages and collections page header
.pageactions {
z-index: $zindex-fixed;
position: fixed;
right: 0;
top: $navbar-height + 30px;
}
.pageheader {
background: $pageheader-bg;
.main {
padding-top: 30px;
padding-bottom: 50px;
@include media-breakpoint-down(md) {
padding-top: 20px;
padding-bottom: 30px;
}
}
}
@for $i from 1 through 5 {
.header.message-count-#{$i} {
~ .pageactions {
top: $navbar-height + ($i * 33px) + 30px;
@include media-breakpoint-down(sm) {
top: $navbar-height + 30px;
}
}
~ .pageheader {
margin-top: $navbar-height + ($i * 33px);
@include media-breakpoint-down(sm) {
margin-top: 0;
}
}
}
}
.no-site-messages {
~ .pageheader {
margin-top: $navbar-height;
@include media-breakpoint-down(sm) {
margin-top: 0;
}
}
}
// push in the right page margin to allow room for floating menu
.pageactions ~ .pageheader .pageheader-content,
.pageactions ~ .main-content {
padding-right: 50px;
}
......@@ -36,7 +36,7 @@
max-width: none;
visibility: visible;
top: 10px;
right: 195px;
right: 230px;
margin: 0 30px 0 0;
padding: 0;
box-shadow: none;
......
......@@ -28,6 +28,18 @@ h1 {
padding-top: 10px;
}
// Page or collections page header title
.pageheader h1 {
margin: 40px 0 10px 0;
padding: 0;
border-bottom: 0;
font-size: 36px;
@include media-breakpoint-down(md) {
font-size: 30px;
margin-top: 20px;
}
}
.page-header {
padding-bottom: $line-height-computed * 0.4525;
margin-bottom: 20px;
......
......@@ -27,6 +27,9 @@ $assessment-incomplete-color: theme-color("danger") !default;
$assessment-partial-color: theme-color("warning") !default;
$assessment-completed-color: theme-color("success") !default;
// Pages and collections page header
$pageheader-bg: #f7f7f7 !default;
// LEGACY BOOTSTRAP 3 VARIABLES
// Header navbar
......
<div class="pageactions">
<div class="btn-group btn-group-top">
<div class="btn-group-vertical">
{if $editurl}{strip}
<a title="{str tag=editthisview section=view}" href="{$editurl}" class="btn btn-secondary">
<span class="icon icon-pencil icon-lg left" role="presentation" aria-hidden="true"></span>
......@@ -35,7 +35,8 @@
<li class="dropdown-item">
<a title="{str tag=print section=view}" id="print_link" href="#" onclick="window.print(); return false;">
<span class="icon icon-print left" role="presentation" aria-hidden="true"></span>
<span class="icon icon-lg icon-print left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=print section=view}</span>
<span class="sr-only">{str tag=print section=view}</span>
</a>
</li>
......@@ -44,11 +45,11 @@
<li class="dropdown-item">
<a id="toggle_watchlist_link" class="watchlist" href="">
{if $viewbeingwatched}
<span class="icon icon-eye-slash left" role="presentation" aria-hidden="true"></span>
{str tag=removefromwatchlist section=view}
<span class="icon icon-lg icon-eye-slash left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=removefromwatchlist section=view}</span>
{else}
<span class="icon icon-eye left" role="presentation" aria-hidden="true"></span>
{str tag=addtowatchlist section=view}
<span class="icon icon-lg icon-eye left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=addtowatchlist section=view}</span>
{/if}
</a>
</li>
......@@ -56,49 +57,49 @@
{if $objector}
<span class="nolink">
<span class="icon icon-lg icon-flag text-danger left" role="presentation" aria-hidden="true"></span>
{str tag=objectionablematerialreported}
<span class="link-text">{str tag=objectionablematerialreported}</span>
</span>
{else}
<a id="objection_link" href="#" data-toggle="modal" data-target="#report-form">
<span class="icon icon-lg icon-flag text-danger left" role="presentation" aria-hidden="true"></span>
{str tag=reportobjectionablematerial}
<span class="link-text">{str tag=reportobjectionablematerial}</span>
</a>
{/if}
</li>
{/if}
{if $userisowner && $objectedpage}
<li>
<li class="dropdown-item">
<a id="review_link" href="#" data-toggle="modal" data-target="#review-form">
<span class="icon icon-lg icon-flag text-success left" role="presentation" aria-hidden="true"></span>
{str tag=objectionreview}
<span class="link-text">{str tag=objectionreview}</span>
</a>
</li>
{/if}
{if $userisowner || $canremove}
<li class="dropdown-item">
<a href="{$WWWROOT}view/delete.php?id={$viewid}" title="{str tag=deletethisview section=view}">
<span class="icon icon-lg icon-trash text-danger" role="presentation" aria-hidden="true"></span>
<span class="icon icon-lg icon-trash text-danger left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=deletethisview section=view}</span>
<span class="sr-only">{str(tag=deletespecific arg1=$maintitle)|escape:html|safe}</span>
{str tag=deletethisview section=view}
</a>
</li>
{/if}
{/if}
{if $versionurl}
<li>
<li class="dropdown-item">
<a href="{$versionurl}">
<span class="icon icon-code-fork icon-lg left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=timeline section=view}</span>
<span class="sr-only">{str(tag=timelinespecific section=view arg1=$maintitle)|escape:html|safe}</span>
{str tag=timeline section=view}
</a>
</li>
{/if}
{if $userisowner}
<li>
<li class="dropdown-item">
<a href="{$createversionurl}">
<span class="icon icon-save icon-lg left" role="presentation" aria-hidden="true"></span>
<span class="link-text">{str tag=savetimeline section=view}</span>
<span class="sr-only">{str(tag=savetimelinespecific section=view arg1=$maintitle)|escape:html|safe}</span>
{str tag=savetimeline section=view}
</a>
</li>
{/if}
......
<div class="pageheader">
<div class="container main-content">
<div class="container pageheader-content">
<div class="row">
<div id="main" class="col-md-12 main">
<div id="content" class="main-column{if $selected == 'content'} editcontent{/if}">
<div id="main-column-container">
<div class="col-md-12 main">
<div class="main-column{if $selected == 'content'} editcontent{/if}">
<div id="pageheader-column-container">
{if $collection}
{include file=collectionnav.tpl}
{/if}
......@@ -48,7 +48,7 @@
{/if}
</div>
<div class="with-heading text-small">
<div class="text-small">
{include file=author.tpl}
{if $alltags}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment