maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve small screen display of Mod Center (#10621) [deploy]

Browse source 
* Add page-header padding and overflow-x for tabs

* Split into two moderator files and move into Views folder

* Add page-header padding style

* Increase font size of crayons-tag on small screen

* Improve small screen view of menu and grid rows in mod center

* Fix date alignment

* Update after first PR revision

* Re-update

* Fix stylesheet reference
This commit is contained in:
Lisa Sy 2020-10-27 07:46:52 -07:00 • committed by GitHub
parent 125584d354
commit 126c2401e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 216 additions and 194 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/components/headers.scss
View file

@ -1,5 +1,13 @@
@import '../config/import';
.crayons-page-header {
padding: var(--su-3) var(--su-3) var(--su-1);
@media (min-width: $breakpoint-m) {
padding: 0;
}
}
.crayons-title,
.crayons-subtitle-1,
.crayons-subtitle-2,
@ -33,7 +41,4 @@
.crayons-subtitle-3 {
font-size: var(--fs-base);
@media (min-width: $breakpoint-s) {
font-size: var(--fs-l);
}
}

3
app/assets/stylesheets/components/tabs.scss
View file

@ -13,9 +13,10 @@
}
&--scrollable {
overflow-y: auto;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
&__item {

6
app/assets/stylesheets/components/tags.scss
View file

@ -1,17 +1,13 @@
@import '../config/import';
.crayons-tag {
font-size: var(--fs-xs);
font-size: var(--fs-s);
color: var(--tag-color);
line-height: 1.3;
border-radius: var(--radius);
padding: var(--su-1);
display: inline-block;
@media (min-width: $breakpoint-s) {
font-size: var(--fs-s);
}
&__prefix {
opacity: 0.4;
font-weight: normal;

1
app/assets/stylesheets/minimal.scss
View file

@ -23,7 +23,6 @@
@import 'listings';
@import 'credits';
@import 'color-picker';
@import 'moderators';
@import 'theme-selector';
@import 'snackbars';
@import 'widgets';

2
app/assets/stylesheets/views.scss
View file

@ -5,6 +5,8 @@
@import 'views/listings';
@import 'views/dashboard';
@import 'views/profile';
@import 'views/mod-actions';
@import 'views/mod-center';
@import 'views/signin';
@import 'views/signup-modal';
@import 'views/sponsors';

172
app/assets/stylesheets/moderators.scss → app/assets/stylesheets/views/mod-actions.scss
View file

@ -1,134 +1,6 @@
@import 'variables';
@import 'mixins';
@import 'config/import';
// Mod Center
.mod-center-heading {
margin-top: var(--su-6);
margin-bottom: var(--su-6);
}
.mod-index-header {
background-color: var(--base-inverted);
border-radius: var(--radius) var(--radius) 0 0;
border-bottom: 2px solid var(--base-10);
padding: var(--su-6) var(--su-4);
}
.mod-index-list-header {
background-color: var(--base-0);
border-bottom: 2px solid var(--base-10);
border-left: none;
border-right: none;
border-top: none;
display: grid;
grid-template-columns: 4fr 2fr 1fr;
h2 {
padding: var(--su-2) var(--su-4);
color: var(--base-50);
}
}
.mod-index-list {
margin: 0;
width: 100%;
}
.moderation-single-article {
align-items: center;
background-color: var(--base-inverted);
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid var(--base-10);
display: grid;
grid-template-columns: 4fr 2fr 1fr;
padding: var(--su-4);
text-align: left;
width: 100%;
&:hover {
background: var(--base-0);
.article-title {
color: var(--link-brand-color);
}
}
.article-title {
color: var(--base-90);
min-width: 0;
header > h3 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
.mod-article-tag {
color: var(--base-80);
padding-right: var(--su-2);
.article-hash-tag {
color: var(--base-40);
}
}
.article-author {
color: var(--base-80);
padding-left: var(--su-4);
}
.article-published-at {
color: var(--base-90);
padding-left: var(--su-6);
}
.article-iframes-container {
border-radius: var(--radius);
box-sizing: border-box;
grid-column-start: 1;
grid-column-end: 4;
width: 100%;
display: flex;
&.opened {
margin-top: var(--su-4);
border: 1px solid var(--base-20);
box-shadow: 0 0 4px 2px var(--base-10);
}
iframe {
border: none;
}
.article-iframe {
width: 100%;
height: 650px; // height is arbitrary, will be removed for modal-esque view
}
.actions-panel-iframe {
width: 60%;
height: 650px; // height is arbitrary, will be removed for modal-esque view
}
}
}
// these styles are to correct height and margin issues in the iframe
.moderations-actions_panel {
min-height: initial;
height: 100%;
#page-content-inner {
margin-bottom: 0;
height: 100%;
}
}
// Actions Menu
@import '../variables';
@import '../mixins';
@import '../config/import';
.mod-actions-menu {
position: fixed;
@ -780,37 +652,13 @@
}
}
.mod-link {
display: inline-block;
font-size: 1.3em;
padding: 3px 8px;
border-radius: var(--radius);
}
// these styles are to correct height and margin issues in the iframe
.moderations-actions_panel {
min-height: initial;
height: 100%;
.mod-center--nav {
margin-bottom: var(--su-6);
}
.mod-center--nav__title {
color: var(--base-80);
padding: var(--su-2);
text-transform: uppercase;
}
.mod-center--nav__item {
justify-content: space-between;
}
.mod-center-inbox {
.inbox-tags {
display: flex;
justify-content: space-between;
padding-left: var(--su-3);
padding-right: var(--su-3);
#page-content-inner {
margin-bottom: 0;
height: 100%;
}
}
.mod-feedback {
margin-top: var(--su-6);
margin-left: var(--su-3);
}

142
app/assets/stylesheets/views/mod-center.scss Normal file
View file

@ -0,0 +1,142 @@
@import '../config/import';
.mod-center-heading {
margin-top: var(--su-6);
margin-bottom: var(--su-6);
}
.mod-index-header {
@media (min-width: $breakpoint-m) {
padding: var(--su-2) 0 var(--su-6);
}
}
.mod-index-list-header,
.moderation-single-article {
border: none;
box-shadow: 0 0 0 1px var(--card-border);
}
.mod-index-list-header {
background-color: var(--base-0);
display: grid;
grid-column-gap: var(--su-2);
padding: var(--su-2) var(--su-4);
@media (min-width: $breakpoint-m) {
grid-template-columns: 4fr 2fr 1fr;
}
&__label {
font-size: var(--fs-s);
font-weight: var(--fw-medium);
color: var(--base-50);
}
}
.mod-index-list {
margin: 0;
width: 100%;
}
.moderation-single-article {
align-items: center;
background-color: var(--base-inverted);
display: grid;
grid-column-gap: var(--su-2);
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-row-gap: var(--su-1);
padding: var(--su-4);
text-align: left;
width: 100%;
@media (min-width: $breakpoint-m) {
grid-template-columns: 4fr 2fr 1fr;
grid-row-gap: 0;
grid-template-rows: 1fr;
}
&:hover {
background: var(--base-0);
.article-title {
color: var(--link-brand-color);
}
}
.article-title--label {
font-weight: var(--fw-bold);
font-size: var(--fs-base);
line-height: var(--lh-tight);
overflow: hidden;
text-overflow: ellipsis;
}
.article-author {
color: var(--base-80);
font-size: var(--fs-s);
line-height: var(--lh-tight);
grid-row: 2;
@media (min-width: $breakpoint-m) {
grid-row: inherit;
}
}
.article-published-at {
font-size: var(--fs-s);
line-height: var(--lh-tight);
align-self: flex-start;
@media (min-width: $breakpoint-m) {
font-weight: var(--fw-bold);
align-self: center;
justify-self: center;
}
}
.article-iframes-container {
border-radius: var(--radius);
box-sizing: border-box;
grid-column-start: 1;
grid-column-end: 4;
width: 100%;
display: flex;
&.opened {
margin-top: var(--su-4);
border: 1px solid var(--base-20);
box-shadow: 0 0 4px 2px var(--base-10);
}
iframe {
border: none;
}
.article-iframe {
width: 100%;
height: 650px; // height is arbitrary, will be removed for modal-esque view
}
.actions-panel-iframe {
width: 60%;
height: 650px; // height is arbitrary, will be removed for modal-esque view
}
}
}
.mod-center--nav {
overflow: hidden;
margin-bottom: 0;
@media (min-width: $breakpoint-m) {
margin-bottom: var(--su-6);
}
}
.mod-feedback {
margin-top: var(--su-6);
margin-left: var(--su-3);
}

4
app/javascript/modCenter/singleArticle/index.jsx
View file

@ -76,11 +76,11 @@ export default class SingleArticle extends Component {
</header>
{tags}
</span>
<span className="article-author fs-s lw-medium lh-tight">
<span className="article-author">
{newAuthorNotification}
{user.name}
</span>
<span className="article-published-at fs-s fw-bold lh-tight">
<span className="article-published-at">
<time dateTime={publishedAt}>{formatDate(publishedAt)}</time>
</span>
<div

46
app/views/moderations/_mod_sidebar_left.html.erb
View file

@ -1,35 +1,55 @@
<aside class="crayons-layout__sidebar-left">
<h1 class="crayons-title mb-6 pl-2">
<aside class="crayons-layout__sidebar-left crayons-page-header grid gap-1 m:block">
<h1 class="crayons-title mb-0 pl-0 m:pl-2 m:mb-6">
Mod Center
</h1>
<nav class="mod-center--nav" aria-label="Mod center inbox navigation">
<h3 class="crayons-subtitle-3 mb-4 pl-2">
<h3 class="crayons-subtitle-3 mb-2 pl-2 hidden m:block">
Inbox
</h3>
<div id="mod-center-inbox" class="mod-center-inbox">
<div id="mod-center-inbox" class="mod-center--nav--medium hidden m:block">
<a
href="<%= "#{URL.url}/mod" %>"
class="crayons-link crayons-link--block <%= "crayons-link--current" if @tag.blank? %>"
data-tag-name="All topics">
All topics
</a>
<% if @current_user_tags.any? %>
<% @current_user_tags.each do |tag| %>
<a href="<%= "#{URL.url}/mod/#{tag}" %>" class="crayons-link crayons-link--block inbox-tags<%= " crayons-link--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>">
<a href="<%= "#{URL.url}/mod/#{tag}" %>" class="crayons-link crayons-link--block <%= "crayons-link--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>">
#<%= tag %>
<span id="<%= tag %>-indicator" class="crayons-indicator"></span>
</a>
<% end %>
<% end %>
</div>
<div id="mod-center-inbox" class="mod-center--nav--default crayons-tabs crayons-tabs--scrollable flex m:hidden">
<a
href="<%= "#{URL.url}/mod" %>"
class="crayons-link crayons-link--block inbox-tags<%= " crayons-link--current" if @tag.blank? %>"
class="crayons-tabs__item <%= "crayons-tabs__item--current" if @tag.blank? %>"
data-tag-name="All topics">
All topics
</a>
<% if @current_user_tags.any? %>
<% @current_user_tags.each do |tag| %>
<a href="<%= "#{URL.url}/mod/#{tag}" %>" class="crayons-tabs__item <%= "crayons-tabs__item--current" if tag == @tag&.name %>" data-tag-name="<%= tag %>">
#<%= tag %>
<span id="<%= tag %>-indicator" class="crayons-indicator"></span>
</a>
<% end %>
<% end %>
</div>
</nav>
<nav class="mod-center--nav" aria-label="Mod center resources navigation">
<h3 class="crayons-subtitle-3 mb-4 pl-2">
<nav class="mod-center--nav hidden m:block" aria-label="Mod center resources navigation">
<h3 class="crayons-subtitle-3 mb-2 pl-2">
Resources
</h3>
<div id="mod-center-other-options">
<% if @community_mod_channel %>
<a href="/connect/<%= @community_mod_channel.slug %>" target="_blank" rel="noopener noreferrer nofollow" class="crayons-link crayons-link--block mod-center--nav__item">
<a href="/connect/<%= @community_mod_channel.slug %> " target=" _blank " rel="noopener noreferrer nofollow" class="crayons-link crayons-link--block mod-center--nav__item">
Connect Channel
<%= inline_svg_tag("link-external.svg", aria: true, title: "External link", class: "crayons-icon") %>
</a>
@ -46,8 +66,12 @@
</nav>
<% if @community_mod_channel %>
<div class="fs-s mod-feedback">
<span class="fw-medium">Have feedback to improve your Mod experience?</span>
<span>Please share in your Connect Channel!</span>
<span class="fw-medium">
Have feedback to improve your Mod experience?
</span>
<span>
Please share in your Connect Channel!
</span>
</div>
<% end %>
</aside>

23
app/views/moderations/index.html.erb
View file

@ -8,18 +8,23 @@
<div class="crayons-layout crayons-layout--2-cols" id="mod-center">
<%= render "moderations/mod_sidebar_left" %>
<main class="mod-index-container articles-list crayons-layout__content">
<div class="mod-index-header">
<header class="mod-index-header hidden m:block">
<h2 class="crayons-subtitle-1">
<%= @tag ? "##{@tag.name}" : "All topics" %>
</h2>
</div>
<div class="mod-index-list-header lh-tight">
<h2 class="fs-xs fw-medium">Post</h2>
<h2 class="fs-xs fw-medium">Author</h2>
<h2 class="fs-xs fw-medium">Date</h2>
</div>
<div class="mod-index-list" id="mod-index-list" data-articles="<%= @articles %>">
</div>
</header>
<section class="mod-index-body">
<div class="mod-index-list-header lh-tight hidden m:grid">
<h2 class="mod-index-list-header__label">Post</h2>
<h2 class="mod-index-list-header__label">Author</h2>
<h2 class="mod-index-list-header__label align-center">Date</h2>
</div>
<div class="mod-index-list" id="mod-index-list" data-articles="<%= @articles %>">
</div>
</section>
</div>
<div data-testid="flag-user-modal-container" class="flag-user-modal-container hidden">
</div>