message UI
Thibault Duplessis
parent
7e2355e93b
commit
837a3a906e
|
|
@ -1,94 +1,64 @@
|
|||
@(form: Form[_], reqUser: Option[User], reqTitle: Option[String], reqMod: Boolean, canMessage: Boolean, oldEnough: Boolean)(implicit ctx: Context)
|
||||
@import lila.app.ui.ScalatagsTwirlForm._
|
||||
|
||||
@message.layout(
|
||||
title = trans.composeMessage.txt()) {
|
||||
<div id="lichess_message" class="content_box">
|
||||
<div class="message_new">
|
||||
<h1>@trans.composeMessage()</h1>
|
||||
@reqUser.ifFalse(canMessage).map { u =>
|
||||
<br /> <br /> <hr /> <br />
|
||||
<p>Sorry, @u.username doesn't accept new messages.</p>
|
||||
@message.layout(title = trans.composeMessage.txt()) {
|
||||
<main class="message-new box box-pad">
|
||||
<h1>@trans.composeMessage()</h1>
|
||||
@reqUser.ifFalse(canMessage).map { u =>
|
||||
<br /> <br /> <hr /> <br />
|
||||
<p>Sorry, @u.username doesn't accept new messages.</p>
|
||||
}.getOrElse {
|
||||
@if(!oldEnough) {
|
||||
<br><br><hr><br.
|
||||
<p>Sorry, you cannot start conversations yet.</p>
|
||||
} else {
|
||||
<form class="form3" action="@routes.Message.create()@reqUser.map(u => "?username=" + u.username)" method="post">
|
||||
@form3.group(form("username"), trans.recipient.frag()) { f =>
|
||||
@reqUser.map { user =>
|
||||
@userLink(user)
|
||||
@form3.hidden(f)
|
||||
}.getOrElse {
|
||||
@if(!oldEnough) {
|
||||
<br /> <br /> <hr /> <br />
|
||||
<p>Sorry, you cannot start conversations yet.</p>
|
||||
} else {
|
||||
<div class="center form">
|
||||
<form action="@routes.Message.create()@reqUser.map(u => "?username=" + u.username)" method="post">
|
||||
<div class="field_to">
|
||||
<label for="@form("username").id">@trans.recipient():</label>
|
||||
@reqUser.map { user =>
|
||||
@userLink(user)
|
||||
<input
|
||||
type="hidden"
|
||||
name="@form("username").name"
|
||||
value="@user.id">
|
||||
}.getOrElse {
|
||||
<input
|
||||
type="text"
|
||||
class="user-autocomplete"
|
||||
required="required"
|
||||
name="@form("username").name"
|
||||
id="@form("username").id"
|
||||
value="@form("username").value"
|
||||
autofocus="1"
|
||||
data-tag="span">
|
||||
@errMsg(form("username"))
|
||||
}
|
||||
</div>
|
||||
|
||||
@if(isGranted(_.ModMessage)) {
|
||||
<div class="field_mod">
|
||||
<label for="@form("mod").id">Send as mod</label>
|
||||
<span>
|
||||
<input
|
||||
@if(reqMod) { checked }
|
||||
name="@form("mod").name"
|
||||
id="@form("mod").id"
|
||||
class="cmn-toggle"
|
||||
type="checkbox" />
|
||||
<label for="@form("mod").id"></label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field_preset">
|
||||
<label for="@form("preset").id">Preset</label>
|
||||
<select name="@form("preset").name">
|
||||
<option></option>
|
||||
</select>
|
||||
</div>
|
||||
@embedJs {
|
||||
window.lichess_mod_presets = @toJsonHtml(lila.message.ModPreset.asJson);
|
||||
}
|
||||
}
|
||||
|
||||
<div class="field_subject">
|
||||
<label for="@form("subject").id">@trans.subject():</label>
|
||||
<input
|
||||
type="text"
|
||||
required="required"
|
||||
minlength=3
|
||||
maxlength=100
|
||||
name="@form("subject").name"
|
||||
id="@form("subject").id"
|
||||
value="@form("subject").value.filter(_.nonEmpty).orElse(reqTitle)"
|
||||
@if(reqUser.isDefined) { autofocus="1" }>
|
||||
@errMsg(form("subject"))
|
||||
</div>
|
||||
<div class="field_body">
|
||||
<textarea
|
||||
name="@form("text").name"
|
||||
required="required"
|
||||
id="@form("text").id">@form("text").value</textarea>
|
||||
@errMsg(form("text"))
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="send button" data-icon="E" type="submit"> @trans.send()</button>
|
||||
<a class="cancel" href="@routes.Message.inbox()">@trans.cancel()</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control user-autocomplete"
|
||||
required="required"
|
||||
name="@f.name"
|
||||
id="@form3.id(f)"
|
||||
value="@f.value"
|
||||
autofocus="1"
|
||||
data-tag="span" />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@if(isGranted(_.ModMessage)) {
|
||||
@form3.checkbox(form("mod"), frag("Send as mod"))
|
||||
@form3.group(form("preset"), frag("Preset")) { f =>
|
||||
@form3.select(f, Nil)
|
||||
}
|
||||
@embedJs { window.lichess_mod_presets = @toJsonHtml(lila.message.ModPreset.asJson); }
|
||||
}
|
||||
|
||||
@form3.group(form("subject"), trans.subject.frag()) { f =>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
required="required"
|
||||
minlength=3
|
||||
maxlength=100
|
||||
name="@f.name"
|
||||
id="@form3.id(f)"
|
||||
value="@f.value.filter(_.nonEmpty).orElse(reqTitle)"
|
||||
@if(reqUser.isDefined) { autofocus="1" } />
|
||||
}
|
||||
@form3.group(form("text"), frag("Message"), klass = "message-text") { f =>
|
||||
@form3.textarea(f)(*.required := true)
|
||||
}
|
||||
@form3.actionsHtml {
|
||||
<a class="cancel" href="@routes.Message.inbox()">@trans.cancel()</a>
|
||||
<button class="button text" data-icon="E" type="submit">@trans.send()</button>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
@(me: User, threads: Paginator[lila.message.Thread])(implicit ctx: Context)
|
||||
|
||||
@message.layout(
|
||||
title = trans.inbox.txt()) {
|
||||
<div id="lichess_message" class="content_box no_padding">
|
||||
<div class="head with_actions">
|
||||
@message.layout(title = trans.inbox.txt()) {
|
||||
<main class="message-list box">
|
||||
<div class="box__top">
|
||||
<h1>@trans.inbox()</h1>
|
||||
@if(threads.nbResults > 0) {
|
||||
<div class="actions">
|
||||
<select class="select">
|
||||
<option value="">Select</option>
|
||||
<option value="all">All</option>
|
||||
<option value="none">None</option>
|
||||
<option value="unread">Unread</option>
|
||||
<option value="read">Read</option>
|
||||
</select>
|
||||
<select class="action">
|
||||
<option value="">Do</option>
|
||||
<option value="unread">Mark as unread</option>
|
||||
<option value="read">Mark as read</option>
|
||||
<option value="delete">Delete</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="box__top__actions">
|
||||
<select class="select">
|
||||
<option value="">Select</option>
|
||||
<option value="all">All</option>
|
||||
<option value="none">None</option>
|
||||
<option value="unread">Unread</option>
|
||||
<option value="read">Read</option>
|
||||
</select>
|
||||
<select class="action">
|
||||
<option value="">Do</option>
|
||||
<option value="unread">Mark as unread</option>
|
||||
<option value="read">Mark as read</option>
|
||||
<option value="delete">Delete</option>
|
||||
</select>
|
||||
<a href="@routes.Message.form" class="button button-green text" data-icon="m">@trans.composeMessage()</a>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<table>
|
||||
<table class="slist slist-pad">
|
||||
@if(threads.nbResults > 0) {
|
||||
<tbody class="infinitescroll">
|
||||
@if(threads.hasToPaginate) {
|
||||
|
|
@ -32,7 +32,7 @@ title = trans.inbox.txt()) {
|
|||
</th></tr>
|
||||
}
|
||||
@threads.currentPageResults.map { thread =>
|
||||
<tr class="paginated @if(thread.isUnReadBy(me)){ new} @if(thread.asMod){ mod}">
|
||||
<tr class="paginated@if(thread.isUnReadBy(me)){ new}@if(thread.asMod){ mod}">
|
||||
<td class="author">
|
||||
@userIdLink(thread.visibleOtherUserId(me), none)
|
||||
</td>
|
||||
|
|
@ -57,5 +57,5 @@ title = trans.inbox.txt()) {
|
|||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,13 @@
|
|||
@(title: String)(body: Html)(implicit ctx: Context)
|
||||
|
||||
@moreCss = {
|
||||
@cssTag("message.css")
|
||||
}
|
||||
|
||||
@moreJs = {
|
||||
@infiniteScrollTag
|
||||
@jsTag("message.js")
|
||||
@jsTag("embed-analyse.js")
|
||||
}
|
||||
|
||||
@side = {
|
||||
<div class="sidebar">
|
||||
<a href="@routes.Message.inbox(1)" class="goto_inbox">@trans.inbox()</a>
|
||||
<a href="@routes.Message.form" class="goto_compose button text" data-icon="m">@trans.composeMessage()</a>
|
||||
</div>
|
||||
}
|
||||
|
||||
@base.layout(
|
||||
title = title,
|
||||
moreCss = moreCss,
|
||||
moreJs = moreJs,
|
||||
side = side.some)(body).toHtml
|
||||
moreCss = responsiveCssTag("message"),
|
||||
responsive = true,
|
||||
moreJs = moreJs)(body).toHtml
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
@(thread: lila.message.Thread, form: Option[Form[_]], blocks: Boolean)(implicit ctx: Context, me: User)
|
||||
@(thread: lila.message.Thread, replyForm: Option[Form[_]], blocks: Boolean)(implicit ctx: Context, me: User)
|
||||
|
||||
@message.layout(
|
||||
title = thread.name) {
|
||||
<div id="lichess_message" class="content_box @if(thread.asMod){ mod}">
|
||||
<div class="thread_actions">
|
||||
@message.layout(title = thread.name) {
|
||||
<main class="message-thread@if(thread.asMod){ mod} box box-pad">
|
||||
<div class="box__top">
|
||||
<h1>@thread.nonEmptyName</h1>
|
||||
<form action="@routes.Message.delete(thread.id)" method="post">
|
||||
<button type="submit" class="delete button"> Delete</button>
|
||||
<button type="submit" class="button button-empty button-red confirm">Delete</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="head">
|
||||
<h1>@thread.nonEmptyName</h1>
|
||||
</div>
|
||||
|
||||
@thread.posts.map { post =>
|
||||
<div class="thread_message embed_analyse" id="message_@post.id">
|
||||
<span class="infos">
|
||||
@userIdLink(thread.visibleSenderOf(post), none) <span data-icon="H"></span> @userIdLink(thread.visibleReceiverOf(post), "inline".some) - @momentFromNow(post.createdAt)
|
||||
</span>
|
||||
<div class="thread_message_body">@richText(post.text)</div>
|
||||
</div>
|
||||
<article class="message-thread__message embed_analyse" id="message_@post.id">
|
||||
<div class="infos">
|
||||
<div>
|
||||
@userIdLink(thread.visibleSenderOf(post), none)
|
||||
<i data-icon="H"></i>
|
||||
@userIdLink(thread.visibleReceiverOf(post), "inline".some)
|
||||
</div>
|
||||
@momentFromNow(post.createdAt)
|
||||
</div>
|
||||
<div class="message-thread__message__body">@richText(post.text)</div>
|
||||
</article>
|
||||
}
|
||||
|
||||
<div class="answer" id="bottom">
|
||||
<div class="message-thread__answer" id="bottom">
|
||||
@if(blocks) {
|
||||
<p class="end">@userIdLink(thread.visibleOtherUserId(me).some) blocks you. You cannot answer.</p>
|
||||
} else {
|
||||
|
|
@ -30,19 +31,21 @@ title = thread.name) {
|
|||
<p class="end">
|
||||
@userIdLink(thread.visibleOtherUserId(me).some) has closed this thread.
|
||||
@if(!thread.asMod){
|
||||
<a href="@routes.Message.form?user=@thread.otherUserId(me)" class="button">Create a new one</a>
|
||||
<a href="@routes.Message.form?user=@thread.otherUserId(me)" class="button">Create a new one</a>
|
||||
}
|
||||
</p>
|
||||
} else {
|
||||
@form.map { f =>
|
||||
@replyForm.map { form =>
|
||||
<form action="@routes.Message.answer(thread.id)" method="post">
|
||||
<div class="field_body">
|
||||
<textarea required="required" name="@f("text").name" id="@f("text").id">@f("text").value</textarea>
|
||||
@errMsg(f("text"))
|
||||
@defining(form("text")) { f =>
|
||||
<textarea required="required" name="@f.name" id="@form3.id(f)">@f.value</textarea>
|
||||
@errMsg(f)
|
||||
}
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="send button" data-icon="E" type="submit"> @trans.send()</button>
|
||||
<a class="cancel" href="@routes.Message.inbox(1)">@trans.cancel()</a>
|
||||
<button class="button text" data-icon="E" type="submit">@trans.send()</button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$(function() {
|
||||
$root = $('#lichess_message');
|
||||
$root = $('main.message');
|
||||
$root.find('select.select').change(function() {
|
||||
$root.find('input[name=threads]').prop('checked', false);
|
||||
switch ($(this).val()) {
|
||||
|
|
@ -19,6 +19,7 @@ $(function() {
|
|||
});
|
||||
$root.find('select.action').change(function() {
|
||||
var action = $(this).val();
|
||||
if (!action) return;
|
||||
var ids = [];
|
||||
$root.find('input[name=threads]:checked').each(function() {
|
||||
return ids.push(this.value);
|
||||
|
|
|
|||
|
|
@ -1,164 +0,0 @@
|
|||
#lichess_message {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
div.sidebar {
|
||||
margin-top: 30px;
|
||||
}
|
||||
div.sidebar a {
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
padding: 1em 0 1em 1em;
|
||||
}
|
||||
|
||||
#lichess_message .head.with_actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#lichess_message .head .actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#lichess_message .head .actions select {
|
||||
margin-right: 20px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
#lichess_message.mod .head h1 {
|
||||
color: #d59120;
|
||||
}
|
||||
|
||||
#lichess_message table {
|
||||
width: 100%;
|
||||
}
|
||||
#lichess_message th {
|
||||
padding: 10px 20px;
|
||||
text-align: right;
|
||||
}
|
||||
#lichess_message tr {
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
#lichess_message tr:nth-child(even) {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
#lichess_message td.check {
|
||||
padding-right: 10px;
|
||||
}
|
||||
#lichess_message td.check input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#lichess_message td.author, td.no_messages {
|
||||
padding: 1em 1em 1em 20px;
|
||||
width: 150px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#lichess_message td.subject a {
|
||||
color: #3893E8;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
}
|
||||
#lichess_message td.subject a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#lichess_message tr.new td.subject a {
|
||||
font-weight: bold;
|
||||
}
|
||||
#lichess_message tr.mod td.subject a {
|
||||
color: #d59120;
|
||||
}
|
||||
#lichess_message td.author, #lichess_message time {
|
||||
white-space: nowrap;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#lichess_message time {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#lichess_message div.thread_actions {
|
||||
margin-top: 0.4em;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#lichess_message div.thread_message {
|
||||
font-size: 1.2em;
|
||||
margin-top: 2em;
|
||||
border-top: 1px solid #d4d4d4;
|
||||
padding-top: 2em;
|
||||
}
|
||||
#lichess_message div.thread_message span.infos {
|
||||
margin-bottom: 1em;
|
||||
display: block;
|
||||
}
|
||||
#lichess_message div.thread_message_body a {
|
||||
color: #3893E8;
|
||||
}
|
||||
#lichess_message div.thread_message_body iframe.analyse {
|
||||
margin: 1em 0;
|
||||
}
|
||||
#lichess_message div.answer {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
#lichess_message div.form {
|
||||
font-size: 1.1em;
|
||||
padding-top: 2em;
|
||||
}
|
||||
#lichess_message div.form div.actions,
|
||||
#lichess_message div.answer div.actions {
|
||||
padding: 0.5em 0;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
#lichess_message div.form .actions a,
|
||||
#lichess_message div.answer div.actions a {
|
||||
margin-left: 1em;
|
||||
}
|
||||
#lichess_message form > div > label {
|
||||
float: left;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
margin-top: 3px;
|
||||
}
|
||||
#lichess_message .field_to input,
|
||||
#lichess_message .field_subject input {
|
||||
width: 450px;
|
||||
border: 1px solid #D4D4D4;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
#lichess_message .field_to,
|
||||
#lichess_message .field_mod,
|
||||
#lichess_message .field_preset,
|
||||
#lichess_message .field_subject {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
#lichess_message .field_mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
#lichess_message .field_mod span {
|
||||
float: left;
|
||||
}
|
||||
#lichess_message form textarea {
|
||||
width: 547px;
|
||||
height: 150px;
|
||||
padding: 10px;
|
||||
border: 1px solid #D4D4D4;
|
||||
}
|
||||
#lichess_message .error {
|
||||
color: red;
|
||||
margin-left: 60px;
|
||||
}
|
||||
#lichess_message .end {
|
||||
border-top: 1px solid #d4d4d4;
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
body.dark #lichess_message tr,
|
||||
body.dark #lichess_message div.thread_message,
|
||||
body.dark #lichess_message textarea,
|
||||
body.dark #lichess_message input,
|
||||
body.dark #lichess_message .end {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
|
@ -37,12 +37,23 @@
|
|||
word-break: normal;
|
||||
}
|
||||
|
||||
%flex-between {
|
||||
%flex-wrap {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
%flex-center {
|
||||
/* extends %flex-wrap */
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
%flex-between {
|
||||
/* extends %flex-center */
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
%flex-between-stretch {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ $vp-max-width: 1200px;
|
|||
|
||||
&-pad {
|
||||
@extend %box-padding;
|
||||
& .box__top {
|
||||
padding: 0 0 var(--box-padding) 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__top {
|
||||
|
|
@ -17,6 +20,15 @@ $vp-max-width: 1200px;
|
|||
& h1 {
|
||||
margin: 0;
|
||||
}
|
||||
&__actions {
|
||||
@extend %flex-wrap;
|
||||
& .button {
|
||||
@extend %flex-center;
|
||||
}
|
||||
& > :not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.box-pad) > h1 {
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
|
||||
& a {
|
||||
@include box-neat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $c-font;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0.6rem 0.4rem 0.6rem 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $c-bg-high;
|
||||
&:hover {
|
||||
color: $c-link;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
}
|
||||
& td {
|
||||
padding: 0.8rem;
|
||||
padding: 1rem;
|
||||
& .label {
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.form3 .captcha {
|
||||
@extend %flex-wrap;
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@include breakpoint($mq-xx-small) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
width: 100%;
|
||||
height: calc(2.7em + 2px);
|
||||
background-clip: padding-box;
|
||||
border: $border;
|
||||
}
|
||||
& textarea.form-control {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
group.radio {
|
||||
@extend %box-neat;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@extend %box-neat, %flex-wrap;
|
||||
overflow: hidden;
|
||||
border: $border;
|
||||
& div {
|
||||
|
|
@ -13,13 +11,11 @@ group.radio {
|
|||
left: -99999px;
|
||||
}
|
||||
& label {
|
||||
@extend %metal;
|
||||
@extend %metal, %flex-center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
line-height: 1.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor:pointer;
|
||||
border-right: $border;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
.site-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
|
||||
& .link {
|
||||
@extend %flex-center;
|
||||
color: $c-font;
|
||||
font-size: 1.1rem;
|
||||
padding: 0 .7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
color: $c-link;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,6 +81,8 @@
|
|||
}
|
||||
|
||||
#topmenu {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
position: fixed;
|
||||
top: $site-header-height;
|
||||
bottom: 0;
|
||||
|
|
@ -95,8 +97,6 @@
|
|||
line-height: 40px;
|
||||
box-shadow: 2px 3px 6px hsla(0, 0, 0%, 0.3);
|
||||
border-radius: 0 3px 0 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
max-width: 80%;
|
||||
@include breakpoint($mq-xx-small) {
|
||||
max-width: 70%;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ $c-link-clear: $c-primary-clear;
|
|||
$c-link-hover: c-clearer(saturate($c-primary, 100%), 25%);
|
||||
|
||||
$c-bg-box: $c-bg-high;
|
||||
$c-bg-input: lighten($c-bg-page, 4%);
|
||||
$c-bg-input: c-light($c-bg-page, 13%);
|
||||
|
||||
$c-bg-header-dropdown: $c-bg-low;
|
||||
$c-header-dropdown: $c-font-clear;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ $c-link-clear: $c-primary-clear;
|
|||
$c-link-hover: c-clearer(saturate($c-primary, 100%), 35%);
|
||||
|
||||
$c-bg-box: $c-bg-high;
|
||||
$c-bg-input: mix(white, $c-bg-page, 60%);
|
||||
$c-bg-input: c-light($c-bg-page, 98%);
|
||||
|
||||
$c-border: hsl(0, 0%, 85%);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
#dasher_app .theme {
|
||||
& .list {
|
||||
@extend %flex-wrap;
|
||||
margin: 5px 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
& .list a {
|
||||
flex: 0 0 50%;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
@extend %flex-center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& .list span {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -115,8 +115,7 @@
|
|||
}
|
||||
& .sound {
|
||||
& .content {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
@extend %flex-wrap;
|
||||
margin: 5px 0 5px 5px;
|
||||
}
|
||||
& .selector a {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
& .list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@extend %flex-wrap;
|
||||
background: url(../images/board/darksquares.jpg);
|
||||
box-shadow: inset 0 7px 20px 3px #777;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,8 +55,7 @@
|
|||
}
|
||||
.oauth .scopes {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
margin: 1rem 0;
|
||||
& label {
|
||||
margin-left: 1rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
.message__list {
|
||||
& .check input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
& .new .subject a {
|
||||
font-weight: bold;
|
||||
}
|
||||
& .mod .subject a {
|
||||
color: $c-brag;
|
||||
}
|
||||
& .author,
|
||||
& time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.message-new .message-text {
|
||||
& label {
|
||||
display: none;
|
||||
}
|
||||
& textarea {
|
||||
height: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
.message-thread {
|
||||
|
||||
&__message {
|
||||
margin-bottom: 3em;
|
||||
border-bottom: $border;
|
||||
padding-bottom: 3em;
|
||||
& .infos {
|
||||
@extend %flex-between;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
&__body iframe.analyse {
|
||||
margin: 1.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__answer {
|
||||
& textarea {
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
}
|
||||
& .actions {
|
||||
margin-top: 1rem;
|
||||
@extend %flex-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
.mobile {
|
||||
& .sides {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@extend %flex-wrap;
|
||||
}
|
||||
& .left-side {
|
||||
flex: 1 1 auto;
|
||||
& .stores {
|
||||
display: flex;
|
||||
& a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
}
|
||||
}
|
||||
& h2 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
@import '../../../common/css/plugin';
|
||||
@import '../../../common/css/component/table-slist';
|
||||
@import '../../../common/css/form/form3';
|
||||
@import '../../../common/css/form/cmn-toggle';
|
||||
@import '../message';
|
||||
|
|
@ -55,8 +55,7 @@ $user-list-width: 24ch;
|
|||
& .user_top {
|
||||
background: $c-bg-box;
|
||||
& h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
font-size: 1.6em;
|
||||
line-height: 2.5em;
|
||||
padding-left: 0.8rem;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/dark';
|
||||
@import 'message';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/light';
|
||||
@import 'message';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import '../../../common/css/theme/transp';
|
||||
@import 'message';
|
||||
|
|
@ -6,9 +6,7 @@
|
|||
@extend %flex-between;
|
||||
margin-bottom: 1.5rem;
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
}
|
||||
& .author {
|
||||
color: $c-font-dim;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@
|
|||
@extend %flex-between;
|
||||
margin-bottom: 3rem;
|
||||
& div {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
@extend %flex-wrap;
|
||||
& .button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
margin-left: -.5em;
|
||||
}
|
||||
#communication .actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@extend %flex-center;
|
||||
}
|
||||
#communication .actions .priv {
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue