Commit c9cee415 authored by Pat Kira's avatar Pat Kira Committed by Robert Lyon

Bug 1686259 Refactor pages and collection template and styles

- For both raw and old raw
- Remove extra conditions for adding class
- Remove unused css selectors
- Rename classes for clarity
- Move styles to one file; _panel-quarter.scss
- Consolidate elements and class for maintainability

behatnotneeded

Change-Id: I1e499e697013a16fcfac2b9a73772944619680a4
parent a0ca5e00
......@@ -434,7 +434,7 @@ class BehatGeneral extends BehatBase {
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the elipsis button for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right button')[0].click();";
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.page-controls .moremenu')[0].click();";
$this->getSession()->executeScript($jscode);
}
......@@ -455,7 +455,7 @@ class BehatGeneral extends BehatBase {
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the collection box for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.collnum')[0].click();";
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.collection-list')[0].click();";
$this->getSession()->executeScript($jscode);
}
......@@ -477,7 +477,7 @@ class BehatGeneral extends BehatBase {
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the elipsis button for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")')[0].click();";
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.page-controls a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")')[0].click();";
$this->getSession()->executeScript($jscode);
}
......
......@@ -320,347 +320,6 @@ h4.list-group-item-heading {
}
}
}
// Styles for the new page/collection layout
.panel-quarter {
position: relative;
&.panel-view {
background-color: #FFF;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
border: 1px solid #ddd;
.panel-heading,
.panel-body {
background-color: transparent;
}
&.panel-warning {
background-color: $state-warning-bg;
color: $state-warning-text;
border-color: $state-warning-border;
}
.panel-footer {
background-color: #f5f5f5;
}
&.site-template {
background: repeating-linear-gradient(
-45deg,
#f1f1f1,
#f1f1f1 10px,
#f9f9f9 10px,
#f9f9f9 20px
) !important;
}
}
&.panel-collection {
background-color: #fff;
box-shadow: 4px 4px 3px rgba(0,0,0,0.25);
border: 1px solid #ddd;
left: 2px;
top: 2px;
.panel-stack {
height: 200px;
position: relative;
left: -2px;
top: -2px;
}
.panel-heading,
.panel-body {
background-color: transparent;
}
&.panel-warning {
background-color: $state-warning-bg;
color: $state-warning-text;
border-color: $state-warning-border;
.panel-stack {
background-color: $state-warning-bg;
}
}
.panel-footer {
background-color: #f5f5f5;
}
}
.panel-heading {
border-bottom: 0;
a {
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: $font-family-serif;
}
}
.panel-body {
padding: 5px;
}
.panel-footer {
border-top: 0;
position: absolute;
width: 100%;
bottom: 0;
.dropdown-menu {
top: 100%;
}
.dropdown-toggle {
.collnum-arrow {
display: none;
}
.collnum {
display: inline-block;
}
span.icon-file {
position: relative;
margin-right: 2px;
span.icon-stack {
position: absolute;
top: 2px;
left: 2px;
border-right: 1px solid $text-color;
border-bottom: 1px solid $text-color;
width: 12px;
height: 14px;
}
}
&.open {
.collnum-arrow {
display: inline-block;
}
.collnum {
display: none;
}
span.icon-file {
display: none;
}
}
}
.elipsis-right {
float: right;
.collnum-arrow {
display: none;
margin-left: 16px;
}
button.moremenu {
border: 0;
background-color: transparent;
margin-left: 15px;
display: inline-block;
color: $text-color;
}
&.open {
button.moremenu {
display: none;
}
.collnum-arrow {
display: inline-block;
cursor: pointer;
}
}
.dropdown-menu {
> li {
> a {
padding: 5px 10px;
}
&.view-details {
padding: 5px 10px;
font-size: $font-size-small;
border-top: 1px solid $dropdown-border;
span {
display: block;
padding: 2px 0;
}
}
}
}
}
}
.access-list {
float: left;
span.icon {
display: inline-block;
}
.collnum-arrow {
display: none;
}
.dropdown-menu {
width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
max-height: 200px;
overflow: auto;
a {
white-space: normal;
background-color: $dropdown-bg;
padding: 5px;
&:hover {
background-color: $dropdown-link-hover-bg;
}
span.icon {
position: absolute;
padding-top: 5px;
}
span.link-text {
display: inline-block;
padding-left: 20px;
position: relative;
}
&.seperator {
border-bottom: 1px solid $dropdown-border;
}
}
}
&.open {
span.icon {
display: none;
}
.collnum-arrow {
display: inline-block;
}
.dropdown-menu {
span.icon {
display: block;
}
}
}
}
&.lastquarter {
.access-list {
ul {
left: auto;
right: 0;
}
}
}
@media (max-width: $screen-sm-min) {
&.lasthalf {
.access-list {
ul {
left: auto;
right: 0;
}
}
}
}
.elipsis-right {
float: right;
.dropdown-menu {
.view-details {
font-size: 12px;
padding: 0 5px 0 5px;
A {
display: inline !important;
padding: 0 !important;
}
}
}
}
.collection-list {
float: right;
a {
display: block;
&:focus,
&:hover {
text-decoration: none;
}
}
&.list-small {
}
&.list-medium {
span.icon-file {
top: -1px;
left: -1px;
}
}
&.list-large {
span.icon-file {
top: -3px;
left: -3px;
}
}
&.open {
}
.dropdown-menu {
width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
max-height: 200px;
overflow: auto;
a {
white-space: normal;
background-color: $dropdown-bg;
padding: 5px 10px;
&:hover {
background-color: $dropdown-link-hover-bg;
}
span.icon {
position: absolute;
padding-top: 4px;
}
span.link-text {
display: inline-block;
padding-left: 20px;
position: relative;
}
}
}
}
&.firstquarter {
.collection-list {
ul {
left: 0;
right: auto;
}
}
}
@media (max-width: $screen-sm-min) {
&.firsthalf {
.collection-list {
ul {
left: 0;
right: auto;
}
}
}
}
.btn-default {
border: 1px solid transparent;
}
.dropdown-menu {
padding: 0;
margin: 0;
min-width: auto;
}
}
.showmore {
text-align: center;
......
......@@ -10,20 +10,3 @@
margin-left:0;
}
}
.panel-quarter {
width: 22%;
float: left;
margin-left: 4%;
height: 200px;
&.firstquarter {
margin-left:0;
}
@media (max-width: $screen-sm-min) {
width: 48%;
margin-left: 4%;
&.firsthalf {
margin-left:0;
}
}
}
// Styles for the new page/collection layout
.panel-collection,
.panel-view {
width: 50%;
float: left;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
height: 200px;
@media (min-width: $screen-sm-min) {
width: 25%;
}
.site-template {
background: repeating-linear-gradient(
-45deg,
#f1f1f1,
#f1f1f1 10px,
#f9f9f9 10px,
#f9f9f9 20px
) !important;
}
.panel-default {
position: relative;
height: 100%;
border: 1px solid $panel-default-border;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-heading {
background-color: transparent;
border-bottom-color: transparent;
.title-link {
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: $font-family-serif;
}
}
.panel-body {
padding: 5px;
}
.panel-footer {
width: 100%;
padding: 0;
border-top: 0;
position: absolute;
bottom: 0;
.dropdown-toggle {
min-width: 35px;
min-width: 40px;
text-decoration: none;
color: $text-color;
.open-indicator {
display: none;
}
&[aria-expanded="true"] {
.open-indicator {
display: inline-block;
}
.page-count,
.icon-stack,
.close-indicator {
display: none;
}
}
}
.dropdown-menu {
top: 100%;
width: 200%; // to allow it to expand to almost 2 panel blocks wide
max-height: 200px;
overflow: auto;
padding: 0;
margin: 0;
min-width: auto;
a {
white-space: normal;
background-color: $dropdown-bg;
padding: 5px;
&:hover {
background-color: $dropdown-link-hover-bg;
}
}
.icon {
position: absolute;
padding-top: 5px;
}
.link-text {
display: inline-block;
padding-left: 20px;
position: relative;
}
.seperator {
border-bottom: 1px solid $dropdown-border;
}
}
}
.page-controls {
float: right;
.dropdown-menu {
width: auto;
max-height: none;
> li > a {
padding: 5px 10px;
}
.view-details {
padding: 5px 10px;
font-size: $font-size-small;
border-top: 1px solid $dropdown-border;
}
}
}
.page-access {
float: left;
}
.collection-list {
float: right;
.dropdown-toggle {
position: relative;
}
.icon-file {
position: relative;
}
.collection-indicator {
position: absolute;
border-right: 1px solid $text-color;
border-bottom: 1px solid $text-color;
width: 12px;
height: 12px;
&.few {
top: 4px;
left: 2px;
}
&.many {
top: 6px;
left: 4px;
}
}
}
.panel-warning {
background-color: $state-warning-bg;
color: $state-warning-text;
border-color: $state-warning-border;
}
}
.panel-collection {
position: relative;
.collection-stack.panel-warning {
&:before,
&:after {
background-color: $state-warning-bg;
}
}
.collection-stack {
&:before,
&:after {
content: "";
display: block;
height: 200px;
width: calc(100% - 30px);
margin: 15px;
position: absolute;
border-radius: $panel-border-radius;
border: 1px solid $panel-default-border;
}
&:before {
top: -13px;
left: 3px;
z-index: -1;
}
&:after {
top: -11px;
left: 6px;
z-index: -2;
box-shadow: 4px 4px 3px rgba(0,0,0,.25);
}
}
}
......@@ -30,6 +30,7 @@
@import "../layout/panel/panel-footer";
@import "../layout/panel/panel-form";
@import "../layout/panel/panel-half";
@import "../layout/panel/panel-quarter";
@import "../layout/panel/panel-heading";
@import "../layout/panel/panel-items"; // groups of panels
@import "../layout/panel/panel-secondary";
......
......@@ -16,7 +16,7 @@
<div class="grouppageswrap view-container">
{if $views}
<div id="myviews" class="list-group">
<div id="myviews" class="row">
{$viewresults|safe}
</div>
{else}
......
......@@ -320,344 +320,8 @@ h4.list-group-item-heading {
}
}
}
// Styles for the new page/collection layout
.panel-quarter {
position: relative;
&.panel-view {
background-color: #FFF;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
border: 1px solid #ddd;
.panel-heading,
.panel-body {
background-color: transparent;
}
&.panel-warning {
background-color: $state-warning-bg;
color: $state-warning-text;
border-color: $state-warning-border;
}
.panel-footer {
background-color: #f5f5f5;
}
&.site-template {
background: repeating-linear-gradient(
-45deg,
#f1f1f1,
#f1f1f1 10px,
#f9f9f9 10px,
#f9f9f9 20px
) !important;
}
}
&.panel-collection {
background-color: #fff;
box-shadow: 4px 4px 3px rgba(0,0,0,0.25);
border: 1px solid #ddd;
left: 2px;
top: 2px;
.panel-stack {
height: 200px;
position: relative;
left: -2px;
top: -2px;
}
.panel-heading,
.panel-body {
background-color: transparent;
}
&.panel-warning {
background-color: $state-warning-bg;
color: $state-warning-text;
border-color: $state-warning-border;
.panel-stack {
background-color: $state-warning-bg;
}