Skip to content

E
edx-platform
Commit c6c3d769 by Galen Frechette
Options

fixes title of course in dashboard to accept very long course names, improves… 

fixes title of course in dashboard to accept very long course names, improves various other UI elemnts in the dashboard
parent 00e366e9
Showing with 91 additions and 80 deletions
lms/static/sass/_course_about.scss
......@@ -99,7 +99,7 @@
@include box-sizing(border-box);
@include border-radius(3px);
display: block;
//font: normal 1.2rem/1.6rem $sans-serif;
font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 10px 0px;
text-transform: uppercase;
......@@ -117,7 +117,6 @@
@include box-sizing(border-box);
color: darken($blue, 20%);
display: block;
//font: normal 1.2rem/1.6rem $sans-serif;
letter-spacing: 1px;
padding: 10px 0px 8px;
text-transform: uppercase;
......
lms/static/sass/_dashboard.scss
......@@ -9,10 +9,13 @@
width: flex-grid(3);
header.profile {
@include background-image(linear-gradient(-90deg, rgb(255,255,255), rgb(245,245,245)));
border: 1px solid rgb(200,200,200);
@include border-radius(4px);
@include box-sizing(border-box);
width: flex-grid(12);
h1.user-name {
border: 1px solid rgb(200,200,200);
@include border-radius(4px);
@include box-sizing(border-box);
color: $base-font-color;
font: 700 1.2em/1.2em $sans-serif;
margin: 0px;
......@@ -21,72 +24,71 @@
text-wrap: nowrap;
text-overflow: ellipsis;
text-transform: none;
width: flex-grid(12);
}
}
.user-info {
.user-info {
@include clearfix;
padding: 0px 10px;
> ul {
background: rgb(252,252,252);
border: 1px solid rgb(200,200,200);
border-top: none;
//@include border-bottom-radius(4px);
@include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
@include clearfix;
padding: 0px 10px;
margin: 0px;
padding: 20px 10px 10px;
width: flex-grid(12);
> ul {
background: rgb(250,250,250);
border: 1px solid rgb(200,200,200);
border-top: none;
@include border-bottom-radius(4px);
@include box-sizing(border-box);
@include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.15));
li {
@include clearfix;
margin: 0px;
padding: 20px 10px 10px;
width: flex-grid(12);
border-bottom: 1px dotted rgb(220,220,220);
list-style: none;
margin-bottom: 20px;
padding-bottom: 10px;
&:hover {
.title .icon {
opacity: 1;
}
}
li {
@include clearfix;
border-bottom: 1px dotted rgb(220,220,220);
list-style: none;
margin-bottom: 20px;
padding-bottom: 10px;
span.title {
color: $lighter-base-font-color;
float: left;
font-family: $sans-serif;
&:hover {
.title .icon {
opacity: 1;
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px;
&.email-icon {
@include background-image(url('../images/portal-icons/email-icon.png'));
}
}
span.title {
color: $lighter-base-font-color;
float: left;
font-family: $sans-serif;
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px;
&.email-icon {
@include background-image(url('../images/portal-icons/email-icon.png'));
}
&.location-icon {
@include background-image(url('../images/portal-icons/home-icon.png'));
}
&.language-icon {
@include background-image(url('../images/portal-icons/language-icon.png'));
}
&.location-icon {
@include background-image(url('../images/portal-icons/home-icon.png'));
}
}
span.data {
color: $lighter-base-font-color;
font-weight: 700;
margin-left: 12px;
&.language-icon {
@include background-image(url('../images/portal-icons/language-icon.png'));
}
}
}
span.data {
color: $lighter-base-font-color;
font-weight: 700;
margin-left: 12px;
}
}
}
}
......@@ -136,13 +138,10 @@
}
.my-course {
background: rgb(250,250,250);
@include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
border: 1px solid rgb(190,190,190);
@include border-radius(3px);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 -1px 0 0 rgba(255,255,255, 0.8), inset 0 1px 0 0 rgba(255,255,255, 0.8));
@include box-sizing(border-box);
@include clearfix;
height: 120px;
margin-right: flex-gutter();
margin-bottom: 25px;
overflow: hidden;
......@@ -158,12 +157,15 @@
background: rgb(225,225,225);
background-size: cover;
background-position: center center;
border-right: 1px solid rgb(150,150,150);
border: 1px solid rgb(120,120,120);
@include border-left-radius(3px);
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.6), 1px 0 0 0 rgba(255,255,255, 0.8));
@include box-sizing(border-box);
float: left;
height: 120px;
height: 100%;
max-height: 100%;
margin: 0px;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 200px;
......@@ -171,7 +173,6 @@
.shade {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.3) 0%,
rgba(0,0,0, 0.3) 100%));
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
......@@ -211,7 +212,15 @@
}
.info {
background: rgb(250,250,250);
@include background-image(linear-gradient(-90deg, rgb(253,253,253), rgb(240,240,240)));
@include box-sizing(border-box);
border: 1px solid rgb(190,190,190);
border-left: none;
@include border-right-radius(3px);
left: 201px;
height: 100%;
max-height: 100%;
padding: 0px 10px;
position: absolute;
right: 0px;
......@@ -219,6 +228,7 @@
z-index: 2;
> hgroup {
@include clearfix;
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
padding: 12px 0px;
......@@ -236,7 +246,8 @@
@include inline-block;
margin-right: 10px;
padding: 5px 10px;
vertical-align: middle;
float: left;
&:hover {
color: $blue;
......@@ -245,16 +256,17 @@
}
h3 {
@include inline-block;
display: block;
margin-bottom: 0px;
vertical-align: middle;
overflow: hidden;
padding-top: 2px;
text-overflow: ellipsis;
white-space: nowrap;
a {
color: $base-font-color;
font-weight: 700;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
text-decoration: underline;
......
lms/templates/dashboard.html
......@@ -11,17 +11,17 @@
<section class="profile-sidebar">
<header class="profile">
<h1 class="user-name">${ user.username }</h1>
<section class="user-info">
<ul>
<li>
<span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
</li>
<li>
<span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
</li>
</ul>
</section>
</header>
<section class="user-info">
<ul>
<li>
<span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
</li>
<li>
<span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
</li>
</ul>
</section>
</section>
<section class="my-courses">
......
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