Skip to content

E
edx-platform
Commit d8a8bacd by Andy Armstrong
Options

Merge pull request #12639 from edx/andya/discussion-board-header 

Add styling for content headers to the edx-platform
parents acc9bca3 3b053980
Showing with 315 additions and 169 deletions
lms/static/sass/discussion/views/_home.scss
...@@ -115,9 +115,9 @@ ...@@ -115,9 +115,9 @@
.row-item-full { .row-item-full {
.notification-checkbox { .notification-checkbox {
@include margin-right($baseline/2);
display: inline-block; display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0); @include padding($baseline/4, 0, $baseline/2, 0);
@include margin-right($baseline/2);
border-radius: 5px; border-radius: 5px;
border: 1px solid gray; border: 1px solid gray;
......
lms/static/sass/shared-v2/_components.scss
...@@ -18,12 +18,12 @@ ...@@ -18,12 +18,12 @@
&.prominent + li { &.prominent + li {
@include border-left(1px solid $lms-border-color); @include border-left(1px solid $lms-border-color);
padding-left: $baseline*0.75; @include padding-left($baseline*0.75);
} }
a, a,
a:visited { a:visited {
padding: ($baseline/2) ($baseline*0.75) 13px ($baseline*0.75); @include padding($baseline/2, $baseline*0.75, 13px, $baseline*0.75);
display: block; display: block;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
...@@ -47,3 +47,48 @@ ...@@ -47,3 +47,48 @@
} }
} }
} }
// TODO: search box should be in the Pattern Library
.page-header-search {
display: inline-block;
.search-form {
display: inline-block;
}
.search-box {
display: inline-block;
position: relative;
vertical-align: middle;
}
.search-field {
transition: all $tmg-f2 ease-in-out;
border: 1px solid $lms-border-color;
border-radius: 3px;
padding: $baseline/4 $baseline*1.5;
font-family: inherit;
}
.action-search {
text-shadow: none;
vertical-align: middle;
padding: $baseline/5 $baseline/2;
}
.action-clear {
@include right(0);
@include margin(0, ($baseline/4), 0, 0);
position: absolute;
top: 0;
color: $lms-gray;
padding: $baseline/4;
// STATE: hover and focus
&:hover,
&:focus {
color: $lms-label-color;
border-width: 0;
}
}
}
lms/static/sass/shared-v2/_footer.scss
...@@ -2,199 +2,199 @@ ...@@ -2,199 +2,199 @@
// ==================== // ====================
.wrapper-footer { .wrapper-footer {
@extend %ui-print-excluded;
margin-top: ($baseline*2);
box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
background: $footer-bg;
clear: both;
footer#footer-openedx {
@include clearfix(); @include clearfix();
box-sizing: border-box; @extend %ui-print-excluded;
margin: 0 auto; box-shadow: 0 -1px 5px 0 $shadow-l1;
border-top: 1px solid tint(palette(grayscale, light), 50%);
padding: 25px ($baseline/2) ($baseline*1.5);
background: $footer-bg;
p, ol, ul { footer#footer-openedx {
font-family: $sans-serif; @include clearfix();
box-sizing: border-box;
margin: 0 auto;
// override needed for poorly scoped font-family styling on p a:link {} p, ol, ul {
a { font-family: $sans-serif;
font-family: $sans-serif;
}
}
a { // override needed for poorly scoped font-family styling on p a:link {}
@extend %link-text; a {
border-bottom: none; font-family: $sans-serif;
}
}
&:hover, a {
&:focus, @extend %link-text;
&:active { border-bottom: none;
border-bottom: 1px dotted $link-color;
}
}
// colophon &:hover,
.colophon { &:focus,
@include span(12); &:active {
border-bottom: 1px dotted $link-color;
}
}
@include susy-media($bp-screen-sm) { // colophon
@include span(8); .colophon {
} @include span(12);
.nav-colophon { @include susy-media($bp-screen-sm) {
@include clearfix(); @include span(8);
margin: $footer_margin; }
ol { .nav-colophon {
list-style: none; @include clearfix();
} margin: $footer_margin;
li { ol {
@include float(left); list-style: none;
margin-right: ($baseline*0.75); }
a { li {
color: tint($black, 20%); @include float(left);
@include margin-right($baseline*0.75);
&:hover, a {
&:focus, color: tint($black, 20%);
&:active {
color: $link-color;
}
}
&:last-child { &:hover,
@include margin-right(0); &:focus,
} &:active {
} color: $link-color;
} }
}
.colophon-about { &:last-child {
@include clearfix(); @include margin-right(0);
}
}
}
img { .colophon-about {
@include float(left); @include clearfix();
width: 68px;
height: 34px; img {
margin-right: 0; @include float(left);
@include margin-right(0);
width: 68px;
height: 34px;
}
p {
@include float(left);
@include span(9);
@include margin-left($baseline);
@include padding-left($baseline);
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
}
}
} }
p { // references
@include float(left); .references {
@include span(9); @include span(4);
margin-left: $baseline; margin: -10px 0 0 0;
padding-left: $baseline; display: inline-block;
font-size: font-size(small);
background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
} }
}
}
// references .wrapper-logo {
.references { margin: ($baseline*0.75) 0;
@include span(4);
margin: -10px 0 0 0;
display: inline-block;
}
.wrapper-logo { a {
margin: ($baseline*0.75) 0; display: inline-block;
a { &:hover,
display: inline-block; &:focus {
border-bottom: 0;
&:hover { }
border-bottom: 0; }
} }
}
}
.copyright { .copyright {
@include text-align(left); @include text-align(left);
margin: -2px 0 8px 0; margin: -2px 0 8px;
font-size: font-size(xx-small); font-size: font-size(xx-small);
color: palette(grayscale, dark); color: palette(grayscale, dark);
} }
.nav-legal { .nav-legal {
@include clearfix(); @include clearfix();
@include text-align(left); @include text-align(left);
li { li {
display: inline-block; display: inline-block;
font-size: font-size(xx-small); font-size: font-size(xx-small);
} }
.nav-legal-02 a { .nav-legal-02 a {
&:before { &:before {
@include margin-right(($baseline/4)); @include margin-right(($baseline/4));
content: "-"; content: "-";
}
}
} }
}
}
.nav-social { .nav-social {
@include text-align(right); @include text-align(right);
margin: 0; margin: 0;
li { li {
display: inline-block; display: inline-block;
&:last-child { &:last-child {
margin-right: 0; @include margin-right(0);
} }
a { a {
display: block; display: block;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
border: none; border: none;
} }
} }
img { img {
display: block; display: block;
}
}
} }
}
}
// platform Open edX logo and link // platform Open edX logo and link
.footer-about-openedx { .footer-about-openedx {
@include span(12); @include span(12);
@include text-align(right); @include text-align(right);
vertical-align: bottom; vertical-align: bottom;
@include susy-media($bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
@include susy-media($bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
a {
a { @include float(right);
@include float(right); display: inline-block;
display: inline-block;
&:hover { &:hover {
border-bottom: none; border-bottom: none;
}
}
} }
}
} }
}
} }
// marketing site design syncing // marketing site design syncing
.view-register, .view-register,
.view-login, .view-login,
.view-passwordreset { .view-passwordreset {
.wrapper-footer footer { .wrapper-footer footer {
width: 960px; width: 960px;
.colophon-about img { .colophon-about img {
margin-top: ($baseline*1.5); margin-top: ($baseline*1.5);
}
} }
}
} }
lms/static/sass/shared-v2/_layouts.scss
...@@ -2,12 +2,20 @@ ...@@ -2,12 +2,20 @@
.content-wrapper { .content-wrapper {
max-width: 1180px; max-width: 1180px;
padding-top: 10px; padding: {
top: $baseline/2;
bottom: $baseline*2;
}
.container {
border: 1px solid $lms-border-color;
background-color: $lms-container-background-color;
padding: $baseline;
}
.page-header { .page-header {
@include clearfix(); @include clearfix();
border-bottom: 1px solid $lms-border-color; border-bottom: 1px solid $lms-border-color;
padding: $baseline $baseline ($baseline/2) $baseline;
.page-title { .page-title {
@extend %t-title4; @extend %t-title4;
...@@ -21,26 +29,43 @@ ...@@ -21,26 +29,43 @@
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
color: $gray; color: $gray;
} }
}
.page-header.has-secondary { &.has-secondary {
.page-header-main {
display: inline-block;
}
.page-header-main { .page-header-secondary {
display: inline-block; @include float(right);
width: flex-grid(8,12); @include text-align(right);
} display: inline-block;
vertical-align: text-bottom;
.form-actions {
display: inline-block;
}
.form-actions > * {
@include margin-left($baseline/2);
vertical-align: middle;
min-width: 200px;
height: 34px;
}
.form-actions > button {
padding: $baseline/5;
min-width: 200px;
height: 34px;
}
.page-header-secondary { .form-actions > *:first-child {
@include text-align(right); @include margin-left(0);
display: inline-block; }
width: flex-grid(4,12); }
vertical-align: text-bottom;
} }
} }
.container { .page-content {
border: 1px solid #c8c8c8; padding-top: $baseline;
background-color: $lms-container-background-color;
padding: $baseline;
} }
} }
lms/static/sass/shared-v2/_variables.scss
// LMS variables // LMS variables
$lms-gray: palette(grayscale, base);
$lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different? $lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different?
$lms-container-background-color: palette(grayscale, white-t); $lms-container-background-color: palette(grayscale, white-t);
$lms-border-color: palette(grayscale, light); $lms-border-color: palette(grayscale, light);
$lms-label-color: palette(grayscale, black); $lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base); $lms-active-color: palette(primary, base);
// Icons
$lms-dark-icon-color: palette(grayscale, white-t);
$lms-dark-icon-background-color: palette(grayscale, black);
lms/templates/ux/reference/course-skeleton.html 0 → 100644
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%block name="pagetitle">Course Skeleton</%block>
<%block name="bodyclass">pattern-library</%block>
<%block name="content">
<nav class="wrapper-course-material">
<div class="course-material">
<ol class="tabs course-tabs">
<li class="tab">
<a href="index.html">
Home
</a>
</li>
<li class="tab">
<a href="#">
Course
</a>
</li>
<li class="tab">
<a href="course-skeleton.html" class="active">
Skeleton
<span class="sr-only">, current location</span>
</a>
</li>
</ol>
</div>
</nav>
<section class="container">
<header class="page-header has-secondary">
<div class="page-header-main">
<div class="sr-is-focusable" tabindex="-1"></div>
<h2 class="hd hd-2 page-title">Skeleton Page</h2>
<p class="page-description">This demonstrates the pieces available to a courseware page.</p>
</div>
<div class="page-header-secondary">
<div class="form-actions">
<button class="btn-neutral btn-small">Click Me!</button>
## TODO: note that this search component markup is provisional
## - update to use Chris's placeholder recommendation: http://codepen.io/clrux/pen/YqMpRO
## - update the Pattern Library's markup to match
<div class="page-header-search">
<form class="search-form" role="search">
<div class="search-box">
<input class="search-field" type="text" value=""
aria-label="Search all the things" placeholder="Search all the things">
<button type="button" class="btn action action-clear" aria-label="Clear search">
<span class="fa fa-times-circle" aria-hidden="true"></span>
</button>
</div>
<button type="submit" class="btn-brand action action-search" aria-label="Search items">
<span class="fa fa-search" aria-hidden="true"></span>
</button>
</form>
</div>
</div>
</div>
</header>
<div class="page-content">
<h3>This is where the page content belongs</h3>
<p>Useful stuff goes here</p>
</div>
</section>
</%block>
lms/templates/ux/reference/index.html
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<h3>Page Types</h3> <h3>Page Types</h3>
<ul> <ul>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li> <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
<li><a href="course-skeleton.html">Course skeleton page</a></li>
</ul> </ul>
</section> </section>
</article> </article>
......
lms/urls.py
...@@ -980,8 +980,7 @@ if settings.DEBUG: ...@@ -980,8 +980,7 @@ if settings.DEBUG:
document_root=settings.PROFILE_IMAGE_BACKEND['options']['location'] document_root=settings.PROFILE_IMAGE_BACKEND['options']['location']
) )
# in debug mode, allow any template to be rendered (most useful for UX reference templates) urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
if 'debug_toolbar' in settings.INSTALLED_APPS: if 'debug_toolbar' in settings.INSTALLED_APPS:
import debug_toolbar import debug_toolbar
......
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