fixes title of course in dashboard to accept very long course names, improves various other UI elemnts in the dashboard
This commit is contained in:
Galen Frechette
@@ -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;
|
||||
|
||||
@@ -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,71 +24,70 @@
|
||||
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;
|
||||
|
||||
li {
|
||||
@include clearfix;
|
||||
border-bottom: 1px dotted rgb(220,220,220);
|
||||
list-style: none;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
.title .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
.title .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span.title {
|
||||
color: $lighter-base-font-color;
|
||||
span.title {
|
||||
color: $lighter-base-font-color;
|
||||
float: left;
|
||||
font-family: $sans-serif;
|
||||
|
||||
.icon {
|
||||
background-size: cover;
|
||||
float: left;
|
||||
font-family: $sans-serif;
|
||||
height: 19px;
|
||||
margin: 2px 8px 0 0;
|
||||
opacity: 0.6;
|
||||
@include transition(all, 0.15s, linear);
|
||||
width: 19px;
|
||||
|
||||
.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'));
|
||||
}
|
||||
|
||||
&.email-icon {
|
||||
@include background-image(url('../images/portal-icons/email-icon.png'));
|
||||
}
|
||||
&.location-icon {
|
||||
@include background-image(url('../images/portal-icons/home-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'));
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user