coach editor UI
Thibault Duplessis
parent
a46c8aa912
commit
9177e2de36
|
|
@ -27,10 +27,10 @@ trait AssetHelper { self: I18nHelper with SecurityHelper =>
|
|||
def dbImageUrl(path: String) = s"$assetBaseUrl/image/$path"
|
||||
|
||||
def responsiveCssTag(name: String)(implicit ctx: Context): Html =
|
||||
cssAt(s"css/lichess.$name.${ctx.currentBg}.${if (isProd) "min" else "dev"}.css")
|
||||
cssAt(s"css/$name.${ctx.currentBg}.${if (isProd) "min" else "dev"}.css")
|
||||
|
||||
def responsiveCssTagNoTheme(name: String)(implicit ctx: Context): Html =
|
||||
cssAt(s"css/lichess.$name.${if (isProd) "min" else "dev"}.css")
|
||||
cssAt(s"css/$name.${if (isProd) "min" else "dev"}.css")
|
||||
|
||||
def cssTag(name: String): Html = cssAt("stylesheets/" + name)
|
||||
|
||||
|
|
|
|||
|
|
@ -7,103 +7,104 @@
|
|||
@jsTag("coach.form.js")
|
||||
}
|
||||
|
||||
@side = {
|
||||
<a href="@routes.Coach.show(c.user.username)" class="preview button text" data-icon="v">Preview coach page</a>
|
||||
}
|
||||
|
||||
@base.layout(title = s"${c.user.titleUsername} coach page",
|
||||
moreCss = cssTags("form3.css", "coach.form.css"),
|
||||
moreJs = moreJs,
|
||||
side = side.some) {
|
||||
<div class="coach_edit content_box no_padding">
|
||||
<div class="top">
|
||||
<div class="picture_wrap">
|
||||
@if(c.coach.hasPicture) {
|
||||
<a class="upload_picture" href="@routes.Coach.picture" title="Change/delete your profile picture">
|
||||
@pic(c, 250)
|
||||
</a>
|
||||
} else {
|
||||
<div class="upload_picture">
|
||||
<a class="button" href="@routes.Coach.picture">Upload a profile picture</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="overview">
|
||||
<h1>
|
||||
@c.user.title.map { t => @t }@c.user.profileOrDefault.nonEmptyRealName.getOrElse(c.user.username)
|
||||
</h1>
|
||||
<div class="todo" data-profile="@c.user.profileOrDefault.isComplete">
|
||||
<h3>TODO list before publishing your coach profile</h3>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form class="content_box_content form3" action="@routes.Coach.edit" method="POST">
|
||||
<div class="tabs">
|
||||
<div data-tab="basics" class="active">Basics</div>
|
||||
<div data-tab="texts">Texts</div>
|
||||
<div data-tab="contents">Contents</div>
|
||||
<div data-tab="reviews" data-count="@reviews.list.size" class="data-count">
|
||||
Pending reviews
|
||||
</div>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<div class="panel basics active">
|
||||
@form3.split {
|
||||
@form3.checkbox(form("listed"), raw("Publish on the coaches list"), help = raw("Enable when your profile is ready").some, half = true)
|
||||
@form3.checkbox(form("available"), raw("Currently available for lessons"), help = raw("Enable to get more students").some, half = true)
|
||||
}
|
||||
@form3.group(form("profile.headline"), raw("Short and inspiring headline"), help = raw("Just one sentence to make students want to choose you").some)(form3.input(_))
|
||||
@form3.split {
|
||||
@form3.group(form("profile.languages"), raw("Languages spoken"), help = raw("Which languages can you give lessons in?").some, half = true)(form3.input(_))
|
||||
@form3.group(form("profile.hourlyRate"), raw("Hourly rate"), help = raw("Indicative, non-contractual").some, half = true)(form3.input(_))
|
||||
}
|
||||
</div>
|
||||
<div class="panel texts">
|
||||
@form3.group(form("profile.description"), raw("Who are you?"), help = raw("Age, profession, country... let your students know you").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.playingExperience"), raw("Playing experience"), help = raw("Tournaments played, best wins, other achievements").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.teachingExperience"), raw("Teaching experience"), help = raw("Diplomas, years of practice, best student results").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.otherExperience"), raw("Other experiences"), help = raw("E.g. as chess commentator, or teaching other domains").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.skills"), raw("Best skills in chess and teaching"))(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.methodology"), raw("Teaching methodology"), help = raw("How you prepare and run lessons. How you follow up with students.").some)(form3.textarea(_)(*.rows := 8))
|
||||
</div>
|
||||
<div class="panel contents">
|
||||
@form3.group(form("profile.publicStudies"), raw("Featured public lichess studies"), help = raw("Up to 6 lichess study URLs, one per line").some)(form3.textarea(_)())
|
||||
@form3.group(form("profile.youtubeChannel"), raw("URL of your Youtube channel"))(form3.input(_))
|
||||
|
||||
@form3.group(form("profile.youtubeVideos"), raw("Featured youtube videos"), help = raw("Up to 6 Youtube video URLs, one per line").some)(form3.textarea(_)(*.rows := 6))
|
||||
</div>
|
||||
<div class="panel reviews">
|
||||
<p class="help text" data-icon="">Reviews are visible only after you approve them.</p>
|
||||
@reviews.list.map { r =>
|
||||
<div class="review" data-action="@routes.Coach.approveReview(r.id)">
|
||||
<div class="user">
|
||||
@userIdLink(r.userId.some)
|
||||
review.barRating(selected = r.score.some, enabled = false).toHtml
|
||||
@momentFromNow(r.updatedAt)
|
||||
</div>
|
||||
<div class="content">
|
||||
@if(r.moddedAt.isDefined) {
|
||||
<div class="modded">
|
||||
Moderators have disapproved this review. Please only accept reviews from
|
||||
actual students, based on actual lessons. Reviews must be about your coaching services.
|
||||
<br />
|
||||
You may delete this review, or ask the author to rephrase it, then approve it.
|
||||
</div>
|
||||
}
|
||||
@richText(r.text)
|
||||
</div>
|
||||
<div class="actions">
|
||||
@if(r.moddedAt.fold(true)(_.isBefore(r.updatedAt))) {
|
||||
<a data-value="1" class="yes" data-icon="E"></a>
|
||||
}
|
||||
<a data-value="0" class="no" data-icon="L"></a>
|
||||
</div>
|
||||
moreCss = responsiveCssTag("coach.editor"),
|
||||
responsive = true,
|
||||
moreJs = moreJs) {
|
||||
<main class="coach-edit">
|
||||
<aside class="coach-side">
|
||||
<a href="@routes.Coach.show(c.user.username)" class="button button-empty text" data-icon="v">Preview coach page</a>
|
||||
</aside>
|
||||
<div class="coach-main box">
|
||||
<div class="top">
|
||||
<div class="picture_wrap">
|
||||
@if(c.coach.hasPicture) {
|
||||
<a class="upload_picture" href="@routes.Coach.picture" title="Change/delete your profile picture">
|
||||
@pic(c, 250)
|
||||
</a>
|
||||
} else {
|
||||
<div class="upload_picture">
|
||||
<a class="button" href="@routes.Coach.picture">Upload a profile picture</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="overview">
|
||||
<h1>
|
||||
@c.user.title.map { t => @t }@c.user.profileOrDefault.nonEmptyRealName.getOrElse(c.user.username)
|
||||
</h1>
|
||||
<div class="todo" data-profile="@c.user.profileOrDefault.isComplete">
|
||||
<h3>TODO list before publishing your coach profile</h3>
|
||||
<ul></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status text" data-icon="E">Your changes have been saved.</div>
|
||||
</form>
|
||||
</div>
|
||||
<form class="box__pad form3" action="@routes.Coach.edit" method="POST">
|
||||
<div class="tabs">
|
||||
<div data-tab="basics" class="active">Basics</div>
|
||||
<div data-tab="texts">Texts</div>
|
||||
<div data-tab="contents">Contents</div>
|
||||
<div data-tab="reviews" data-count="@reviews.list.size" class="data-count">
|
||||
Pending reviews
|
||||
</div>
|
||||
</div>
|
||||
<div class="panels">
|
||||
<div class="panel basics active">
|
||||
@form3.split {
|
||||
@form3.checkbox(form("listed"), raw("Publish on the coaches list"), help = raw("Enable when your profile is ready").some, half = true)
|
||||
@form3.checkbox(form("available"), raw("Currently available for lessons"), help = raw("Enable to get more students").some, half = true)
|
||||
}
|
||||
@form3.group(form("profile.headline"), raw("Short and inspiring headline"), help = raw("Just one sentence to make students want to choose you").some)(form3.input(_))
|
||||
@form3.split {
|
||||
@form3.group(form("profile.languages"), raw("Languages spoken"), help = raw("Which languages can you give lessons in?").some, half = true)(form3.input(_))
|
||||
@form3.group(form("profile.hourlyRate"), raw("Hourly rate"), help = raw("Indicative, non-contractual").some, half = true)(form3.input(_))
|
||||
}
|
||||
</div>
|
||||
<div class="panel texts">
|
||||
@form3.group(form("profile.description"), raw("Who are you?"), help = raw("Age, profession, country... let your students know you").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.playingExperience"), raw("Playing experience"), help = raw("Tournaments played, best wins, other achievements").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.teachingExperience"), raw("Teaching experience"), help = raw("Diplomas, years of practice, best student results").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.otherExperience"), raw("Other experiences"), help = raw("E.g. as chess commentator, or teaching other domains").some)(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.skills"), raw("Best skills in chess and teaching"))(form3.textarea(_)(*.rows := 8))
|
||||
@form3.group(form("profile.methodology"), raw("Teaching methodology"), help = raw("How you prepare and run lessons. How you follow up with students.").some)(form3.textarea(_)(*.rows := 8))
|
||||
</div>
|
||||
<div class="panel contents">
|
||||
@form3.group(form("profile.publicStudies"), raw("Featured public lichess studies"), help = raw("Up to 6 lichess study URLs, one per line").some)(form3.textarea(_)())
|
||||
@form3.group(form("profile.youtubeChannel"), raw("URL of your Youtube channel"))(form3.input(_))
|
||||
|
||||
@form3.group(form("profile.youtubeVideos"), raw("Featured youtube videos"), help = raw("Up to 6 Youtube video URLs, one per line").some)(form3.textarea(_)(*.rows := 6))
|
||||
</div>
|
||||
<div class="panel reviews">
|
||||
<p class="help text" data-icon="">Reviews are visible only after you approve them.</p>
|
||||
@reviews.list.map { r =>
|
||||
<div class="review" data-action="@routes.Coach.approveReview(r.id)">
|
||||
<div class="user">
|
||||
@userIdLink(r.userId.some)
|
||||
review.barRating(selected = r.score.some, enabled = false).toHtml
|
||||
@momentFromNow(r.updatedAt)
|
||||
</div>
|
||||
<div class="content">
|
||||
@if(r.moddedAt.isDefined) {
|
||||
<div class="modded">
|
||||
Moderators have disapproved this review. Please only accept reviews from
|
||||
actual students, based on actual lessons. Reviews must be about your coaching services.
|
||||
<br />
|
||||
You may delete this review, or ask the author to rephrase it, then approve it.
|
||||
</div>
|
||||
}
|
||||
@richText(r.text)
|
||||
</div>
|
||||
<div class="actions">
|
||||
@if(r.moddedAt.fold(true)(_.isBefore(r.updatedAt))) {
|
||||
<a data-value="1" class="yes" data-icon="E"></a>
|
||||
}
|
||||
<a data-value="0" class="no" data-icon="L"></a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="status text" data-icon="E">Your changes have been saved.</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
}.toHtml
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ object index {
|
|||
moreJs = infiniteScrollTag
|
||||
) {
|
||||
main(cls := "coach-list")(
|
||||
st.aside(cls := "coach-list__side")(
|
||||
st.aside(cls := "coach-list__side coach-side")(
|
||||
img(src := staticUrl("images/icons/certification.svg"), cls := "coach-list__certification"),
|
||||
h1("Certified coaches"),
|
||||
p("We have curated this list of the best online chess coaches."),
|
||||
|
|
@ -32,7 +32,7 @@ object index {
|
|||
"and we will review your application."
|
||||
)
|
||||
),
|
||||
div(cls := "coach-list__main box")(
|
||||
div(cls := "coach-list__main coach-main box")(
|
||||
div(cls := "box__top")(
|
||||
h1("Top chess coaches"),
|
||||
div(cls := "box__top__actions")(
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ $('.coach-review-form form').show();
|
|||
).some
|
||||
) {
|
||||
main(cls := "coach-show")(
|
||||
st.aside(cls := "coach-show__side")(
|
||||
st.aside(cls := "coach-show__side coach-side")(
|
||||
a(cls := "button button-empty", href := routes.User.show(c.user.username))("View ", c.user.username, " lichess profile"),
|
||||
if (ctx.me.exists(c.coach.is)) frag(
|
||||
if (c.coach.isListed) "This page is now public."
|
||||
|
|
@ -62,7 +62,7 @@ $('.coach-review-form form').show();
|
|||
ctx.me.exists(_.id != c.user.id) option review.form(c, myReview),
|
||||
review.list(c, coachReviews)
|
||||
),
|
||||
div(cls := "coach-show__main box")(
|
||||
div(cls := "coach-show__main coach-main box")(
|
||||
div(cls := "coach-widget")(widget(c, link = false)),
|
||||
div(cls := "coach-show__sections")(
|
||||
section("About me", profile.description),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
$(function() {
|
||||
|
||||
var $editor = $('.coach_edit');
|
||||
var $editor = $('.coach-edit');
|
||||
|
||||
var todo = (function() {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,219 +0,0 @@
|
|||
.coach_edit .top {
|
||||
display: flex;
|
||||
line-height: 2;
|
||||
}
|
||||
.coach_edit .top h1 {
|
||||
margin: 0;
|
||||
padding: 0!important;
|
||||
font-family: 'Roboto';
|
||||
font-size: 32px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.coach_edit .top .picture_wrap {
|
||||
margin-right: 30px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.coach_picture .picture_wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.coach_edit .top .upload_picture {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.coach_edit .overview {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.coach_edit .overview .todo,
|
||||
.coach_edit .overview.with_todo .analytics {
|
||||
display: none;
|
||||
}
|
||||
.coach_edit .overview.with_todo .todo {
|
||||
display: block;
|
||||
}
|
||||
.coach_edit .overview .todo h3 {
|
||||
margin: 0;
|
||||
color: #dc3545;
|
||||
font-weight: bold;
|
||||
}
|
||||
.coach_edit .overview .todo li {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
.coach_edit .top a,
|
||||
body.dark .coach_edit .top a {
|
||||
color: #3893E8;
|
||||
}
|
||||
|
||||
.coach_edit .material.form {
|
||||
margin-top: 0;
|
||||
}
|
||||
.coach_edit .material.form .form-group textarea {
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
.coach_picture form {
|
||||
padding: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
.coach_picture form.delete button {
|
||||
color: red;
|
||||
}
|
||||
.coach_picture .cancel {
|
||||
padding: 40px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.coach_picture .forms > *:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.coach_edit .tabs {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.coach_edit .tabs > div {
|
||||
flex: 1 1 100%;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.coach_edit .tabs > div.data-count::after {
|
||||
padding: 2px 6px;
|
||||
font-size: 1.2em;
|
||||
height: auto;
|
||||
line-height: 1.2em;
|
||||
top: 6px;
|
||||
}
|
||||
.coach_edit .tabs > div:hover {
|
||||
color: #3893E8;
|
||||
}
|
||||
.coach_edit .tabs > .active {
|
||||
color: #3893E8;
|
||||
border-bottom: 3px solid #3893E8;
|
||||
}
|
||||
.coach_edit .panel {
|
||||
display: none;
|
||||
}
|
||||
.coach_edit .panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.coach_edit .status {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
color: #759900;
|
||||
}
|
||||
.coach_edit .status.saved {
|
||||
opacity: 1;
|
||||
}
|
||||
.coach_edit .reviews .help {
|
||||
margin: -30px 0 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.coach_edit .reviews .review {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #ccc;
|
||||
margin-top: 40px;
|
||||
}
|
||||
body.dark .coach_edit .reviews .review,
|
||||
body.dark .coach_picture form,
|
||||
body.dark .coach_picture .cancel {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
.coach_edit .reviews .user > * {
|
||||
display: block;
|
||||
}
|
||||
.coach_edit .reviews .modded {
|
||||
background: #dc322f;
|
||||
color: #fff;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.coach_edit .reviews .content {
|
||||
margin: 0 20px;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
.coach_edit .reviews .actions {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.coach_edit .reviews .actions a {
|
||||
flex: 0 0 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 44px;
|
||||
font-size: 25px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
body.dark .coach_edit .reviews .actions a {
|
||||
background: #363636;
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
.coach_edit .reviews .actions .yes {
|
||||
color: #759900;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.coach_edit .reviews .actions .no {
|
||||
color: #dc322f;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.coach_edit .reviews .actions a:hover {
|
||||
color: #fff;
|
||||
background: #759900!important;
|
||||
}
|
||||
.coach_edit .reviews .actions a.no:hover {
|
||||
background: #dc322f!important;
|
||||
}
|
||||
|
||||
#site_header a.preview {
|
||||
display: block;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* review score */
|
||||
.br-widget {
|
||||
white-space: nowrap;
|
||||
margin: 8px 0 5px 0;
|
||||
}
|
||||
.br-widget a {
|
||||
font: 18px "lichess";
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-decoration: none;
|
||||
margin-right: 2px;
|
||||
cursor: default;
|
||||
}
|
||||
.br-widget a:after {
|
||||
content: 't';
|
||||
color: #d2d2d2;
|
||||
}
|
||||
body.dark .br-widget a:after {
|
||||
color: #555;
|
||||
}
|
||||
.br-widget a.br-selected:after {
|
||||
color: #d59120!important;
|
||||
}
|
||||
.br-widget .br-current-rating {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@ $vp-max-width: 1200px;
|
|||
.box {
|
||||
@extend %box-shadow;
|
||||
background: $c-bg-box;
|
||||
min-height: 100%;
|
||||
|
||||
@include fluid-size('--box-padding', 20px, 60px);
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
color: $c-error;
|
||||
}
|
||||
& .form-help {
|
||||
color: $c-brag;
|
||||
color: $c-font-dim;
|
||||
}
|
||||
|
||||
& .form-check div {
|
||||
|
|
|
|||
|
|
@ -21,4 +21,9 @@
|
|||
grid-area: content;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .box {
|
||||
/* ensure the content is as high as the menu */
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ gulp.task('css-dev', gulp.series([createThemedBuilds, build]));
|
|||
function renameAs(ext) {
|
||||
return rename(path => {
|
||||
path.dirname = '';
|
||||
path.basename = `lichess.${path.basename}.${ext}`;
|
||||
path.basename = `${path.basename}.${ext}`;
|
||||
return path;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@import '../../../common/css/plugin';
|
||||
@import '../../../common/css/form/form3';
|
||||
@import '../coach/editor';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/dark';
|
||||
@import 'coach.editor';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/light';
|
||||
@import 'coach.editor';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/transp';
|
||||
@import 'coach.editor';
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'layout';
|
||||
@import 'widget';
|
||||
@import 'list';
|
||||
@import 'show';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
@import 'layout';
|
||||
@import 'bar-rating';
|
||||
|
||||
.coach-edit {
|
||||
& .top {
|
||||
display: flex;
|
||||
line-height: 2;
|
||||
}
|
||||
& .top h1 {
|
||||
@extend %roboto;
|
||||
margin: 0;
|
||||
padding: 0!important;
|
||||
font-size: 32px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
& .top .picture_wrap {
|
||||
margin-right: 30px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
.coach_picture .picture_wrap {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .top .upload_picture {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
& .overview {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
& .overview .todo,
|
||||
& .overview.with_todo .analytics {
|
||||
display: none;
|
||||
}
|
||||
& .overview.with_todo .todo {
|
||||
display: block;
|
||||
}
|
||||
& .overview .todo h3 {
|
||||
margin: 0;
|
||||
color: #dc3545;
|
||||
font-weight: bold;
|
||||
}
|
||||
& .overview .todo li {
|
||||
list-style: disc inside;
|
||||
}
|
||||
|
||||
& .material.form {
|
||||
margin-top: 0;
|
||||
}
|
||||
& .material.form .form-group textarea {
|
||||
height: 12em;
|
||||
}
|
||||
|
||||
.coach_picture form {
|
||||
padding: 30px;
|
||||
border-top: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
.coach_picture form.delete button {
|
||||
color: red;
|
||||
}
|
||||
.coach_picture .cancel {
|
||||
padding: 40px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.coach_picture .forms > *:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
& .tabs {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 40px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
& .tabs > div {
|
||||
flex: 1 1 100%;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
& .tabs > div.data-count::after {
|
||||
padding: 2px 6px;
|
||||
font-size: 1.2em;
|
||||
height: auto;
|
||||
line-height: 1.2em;
|
||||
top: 6px;
|
||||
}
|
||||
& .tabs > div:hover {
|
||||
color: #3893E8;
|
||||
}
|
||||
& .tabs > .active {
|
||||
color: #3893E8;
|
||||
border-bottom: 3px solid #3893E8;
|
||||
}
|
||||
& .panel {
|
||||
display: none;
|
||||
}
|
||||
& .panel.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .status {
|
||||
opacity: 0;
|
||||
transition: 0.5s;
|
||||
text-align: center;
|
||||
color: #759900;
|
||||
}
|
||||
& .status.saved {
|
||||
opacity: 1;
|
||||
}
|
||||
& .reviews .help {
|
||||
margin: -30px 0 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
& .reviews .review {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #ccc;
|
||||
margin-top: 40px;
|
||||
}
|
||||
& .reviews .user > * {
|
||||
display: block;
|
||||
}
|
||||
& .reviews .modded {
|
||||
background: #dc322f;
|
||||
color: #fff;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
& .reviews .content {
|
||||
margin: 0 20px;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
& .reviews .actions {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
& .reviews .actions a {
|
||||
flex: 0 0 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 44px;
|
||||
font-size: 25px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #d0d0d0;
|
||||
}
|
||||
& .reviews .actions .yes {
|
||||
color: #759900;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
& .reviews .actions .no {
|
||||
color: #dc322f;
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-left: 0;
|
||||
}
|
||||
& .reviews .actions a:hover {
|
||||
color: #fff;
|
||||
background: #759900!important;
|
||||
}
|
||||
& .reviews .actions a.no:hover {
|
||||
background: #dc322f!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
$mq-coach-col2: $mq-medium;
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'main'
|
||||
'side';
|
||||
|
||||
& .coach-main {
|
||||
grid-area: main;
|
||||
}
|
||||
& .coach-side {
|
||||
grid-area: side;
|
||||
margin: 2em 2em 0 2em;
|
||||
}
|
||||
|
||||
@include breakpoint($mq-coach-col2) {
|
||||
grid-template-columns: 300px auto;
|
||||
grid-template-areas:
|
||||
'side main';
|
||||
grid-gap: 2rem;
|
||||
& .coach-side {
|
||||
margin: 4rem 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
.coach-list {
|
||||
display: flex;
|
||||
& .mselect {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
&__side {
|
||||
flex: 0 0 300px;
|
||||
text-align: center;
|
||||
margin: 2rem 2rem 0 0;
|
||||
margin-top: 2rem;
|
||||
& img {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
|
|
@ -24,7 +22,6 @@
|
|||
}
|
||||
}
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
& .coach-widget {
|
||||
border-top: $border;
|
||||
&:nth-child(even) {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,11 @@
|
|||
.coach-show {
|
||||
display: flex;
|
||||
&__side {
|
||||
flex: 0 0 300px;
|
||||
margin: 2rem 2rem 0 0;
|
||||
& > .button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&__main {
|
||||
@extend %box-neat-force;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
& .coach-widget {
|
||||
@extend %metal;
|
||||
|
|
@ -21,22 +17,14 @@
|
|||
}
|
||||
&__sections {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
grid-auto-flow: dense;
|
||||
grid-gap: 3em;
|
||||
margin: 3em;
|
||||
section {
|
||||
font-size: 1.2em;
|
||||
box-sizing: border-box;
|
||||
width: 50%;
|
||||
padding: 1em 2em 1em 1em;
|
||||
text-align: justify;
|
||||
&:nth-child(odd) {
|
||||
padding: 1em 1em 1em 2em;
|
||||
}
|
||||
& .content {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
& h2 {
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@ lichess.topMenuIntent = function() {
|
|||
var $el = $('#challenge_app').html(lichess.initiatingHtml);
|
||||
var isDev = $('body').data('dev');
|
||||
lichess.loadCss(lichess.cssPath('challengeApp', 'challenge'));
|
||||
lichess.loadScript('compiled/lichess.challenge' + (isDev ? '' : '.min') + '.js').done(function() {
|
||||
lichess.loadScript(lichess.compiledScript('challenge')).done(function() {
|
||||
instance = LichessChallenge.default($el[0], {
|
||||
data: data,
|
||||
show: function() {
|
||||
|
|
@ -350,7 +350,7 @@ lichess.topMenuIntent = function() {
|
|||
var $el = $('#notify_app').html(initiatingHtml);
|
||||
var isDev = $('body').data('dev');
|
||||
lichess.loadCss(lichess.cssPath('notifyApp', 'notify'));
|
||||
lichess.loadScript('compiled/lichess.notify' + (isDev ? '' : '.min') + '.js').done(function() {
|
||||
lichess.loadScript(lichess.compiledScript('notify')).done(function() {
|
||||
instance = LichessNotify.default($el.empty()[0], {
|
||||
data: data,
|
||||
incoming: incoming,
|
||||
|
|
@ -459,7 +459,7 @@ lichess.topMenuIntent = function() {
|
|||
var isDev = $('body').data('dev');
|
||||
var isPlaying = $('body').hasClass('playing');
|
||||
lichess.loadCss(lichess.cssPath('dasherApp', 'dasher'));
|
||||
lichess.loadScript('compiled/lichess.dasher' + (isDev ? '' : '.min') + '.js').done(function() {
|
||||
lichess.loadScript(lichess.compiledScript('dasher')).done(function() {
|
||||
instance = LichessDasher.default($el.empty()[0], {
|
||||
setZoom: setZoom,
|
||||
playing: isPlaying
|
||||
|
|
@ -477,7 +477,7 @@ lichess.topMenuIntent = function() {
|
|||
if (booted) return;
|
||||
booted = true;
|
||||
lichess.loadCss('stylesheets/cli.css');
|
||||
lichess.loadScript('compiled/lichess.cli' + ($('body').data('dev') ? '' : '.min') + '.js').done(function() {
|
||||
lichess.loadScript(lichess.compiledScript('cli')).done(function() {
|
||||
LichessCli.app($wrap, toggle);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ lichess.assetUrl = function(path, opts) {
|
|||
};
|
||||
lichess.cssPath = function(oldKey, respKey) {
|
||||
return lichess.isResp ?
|
||||
'css/lichess.' + respKey + '.' + $('body').data('theme') + '.' + ($('body').data('dev') ? 'dev' : 'min') + '.css' :
|
||||
'css/' + respKey + '.' + $('body').data('theme') + '.' + ($('body').data('dev') ? 'dev' : 'min') + '.css' :
|
||||
'stylesheets/' + oldKey + '.css';
|
||||
};
|
||||
lichess.loadedCss = {};
|
||||
|
|
@ -248,6 +248,9 @@ lichess.unloadCss = function(url) {
|
|||
.remove();
|
||||
}
|
||||
}
|
||||
lichess.compiledScript = function(name) {
|
||||
return 'compiled/lichess.' + name + ($('body').data('dev') ? '' : '.min') + '.js';
|
||||
}
|
||||
lichess.loadScript = function(url, opts) {
|
||||
return $.ajax({
|
||||
dataType: "script",
|
||||
|
|
|
|||
Loading…
Reference in New Issue