Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: consolidate mobile stylesheets into common where possible

This commit is contained in:
awesomerobot 2024-11-15 17:09:30 -05:00
parent fd5ef6896d
commit 9545fadfee
51 changed files with 475 additions and 642 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/assets/stylesheets/common/admin/admin_report_table.scss
View File

@ -19,6 +19,9 @@
margin: 0;
border: 1px solid var(--primary-low);
table-layout: fixed;
@include breakpoint("mobile-extra-large") {
font-size: var(--font-down-1);
}
tbody {
border-top: 0;
@ -26,11 +29,28 @@
}
.table .admin-report-table-header {
@include breakpoint("mobile-extra-large") {
font-weight: 500;
border-right: 1px solid var(--primary-low);
padding: auto;
.title {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: right;
transform: rotate(180deg);
.emoji {
transform: rotate(-180deg);
}
}
}
.sort-btn {
outline: none;
background: none;
padding: 3px 8px;
@include ellipsis;
@include breakpoint("mobile-extra-large") {
display: none;
}
}
&.is-current-sort {
@ -60,6 +80,9 @@
.admin-report-table-cell {
&.user .username {
margin-left: 0.25em;
@include breakpoint("mobile-extra-large") {
display: none;
}
}
}

23
app/assets/stylesheets/common/admin/admin_reports.scss
View File

@ -7,6 +7,29 @@
margin-bottom: 1em;
border-bottom: 1px solid var(--primary-low);
}
@include breakpoint(mobile-extra-large) {
.body {
flex-direction: column;
.filters {
order: 0;
margin: 0;
width: 100%;
}
.main {
order: 2;
}
.report-alert {
margin: 0;
order: 1;
flex: 1 0 0px;
padding: 1em;
}
}
}
}
.admin-report-chart .chart-canvas-container .chart-canvas {

22
app/assets/stylesheets/common/admin/badges.scss
View File

@ -1,11 +1,13 @@
// Styles for admin/badges
.admin-badges {
// flex page layout
.badges {
display: flex;
flex-wrap: wrap;
flex-direction: column;
@include breakpoint("mobile-extra-large") {
margin: 0 0.25em;
}
.badges-header {
display: flex;
align-items: center;
@ -19,6 +21,10 @@
}
.content-list {
flex: 0 0 27%;
@include breakpoint("mobile-extra-large") {
flex: 0 0 100%;
width: 100%;
}
}
}
@ -29,6 +35,10 @@
border-right: 1px solid var(--primary-low);
border-left: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
@include breakpoint("mobile-extra-large") {
max-height: 40vh;
margin-right: 0;
}
.admin-badge-list-item {
&:first-child {
border-top: none;
@ -77,6 +87,10 @@
.current-badge {
margin: 20px;
@include breakpoint("mobile-extra-large") {
margin: 20px 0;
width: 100%;
}
.form-kit__field-question {
.form-kit__control-radio-label {
@ -118,6 +132,12 @@
padding: 10px;
border-top: 1px solid var(--primary-low);
}
@include breakpoint("mobile-extra-large") {
.badge-intro {
flex: 0 1 75%;
}
}
}
.award-badge {

57
app/assets/stylesheets/common/admin/customize.scss
View File

@ -93,19 +93,37 @@
.admin-container {
padding-left: 10px;
padding-right: 10px;
@include breakpoint("mobile-extra-large") {
display: flex;
flex-wrap: wrap;
padding: 0;
}
}
.admin-footer {
margin-top: 20px;
}
.color-schemes li {
.d-icon {
margin-right: 0.25em;
color: var(--primary-medium);
.color-schemes {
@include breakpoint("mobile-extra-large") {
ul {
max-height: 250px;
overflow-x: auto;
}
}
li {
.d-icon {
margin-right: 0.25em;
color: var(--primary-medium);
}
}
}
.show-current-style {
display: inline-block;
vertical-align: top;
@include breakpoint("mobile-extra-large") {
padding: 0;
width: 100%;
}
.title {
font-size: var(--font-up-4);
@ -682,6 +700,29 @@
.admin-controls {
display: block;
}
@include breakpoint("mobile-extra-large") {
.controls,
.admin-controls {
width: 100%;
}
h1,
h1 input {
width: 100%;
}
.copy-to-clipboard {
display: none;
}
.sp-replacer {
flex-shrink: 0;
}
td {
vertical-align: top;
}
td.actions {
width: 40px;
}
}
}
.colors {
thead th {
@ -755,6 +796,14 @@
}
}
}
@include breakpoint("mobile-extra-large") {
.themes-list,
.color-schemes {
width: 100%;
margin-bottom: 1em;
}
}
}
.add-upload-modal {

18
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -285,6 +285,9 @@
display: flex;
flex: 1 0 0px;
flex-direction: column;
@include breakpoint("mobile-extra-large") {
font-size: var(--font-down-1);
}
.counters-header {
display: grid;
@ -292,7 +295,6 @@
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
border: 1px solid var(--primary-low);
border-bottom: 0;
font-weight: 700;
text-align: right;
align-items: center;
padding: 0.65em 0.25em;
@ -646,6 +648,12 @@
margin-left: 1em;
}
}
@include breakpoint("mobile-extra-large") {
.section-body {
grid-template-columns: none;
}
}
}
.whats-new,
@ -724,5 +732,13 @@
&__new-feature-version {
margin-left: auto;
color: var(--primary-low-mid);
@include breakpoint("mobile-extra-large") {
font-size: var(--font-down-1);
}
}
@include breakpoint("mobile-extra-large") {
h3 {
margin-right: 0.5em;
}
}
}

1
app/assets/stylesheets/common/base/_index.scss
View File

@ -28,6 +28,7 @@
@import "groups";
@import "header";
@import "history";
@import "invite-signup";
@import "json_schema";
@import "lightbox";
@import "login";

4
app/assets/stylesheets/common/base/alert.scss
View File

@ -34,6 +34,10 @@
&.clickable {
color: var(--tertiary);
z-index: z("base");
@include breakpoint("mobile-extra-large") {
margin: 0;
padding: 1em;
}
}
}

4
app/assets/stylesheets/common/base/dialog.scss
View File

@ -10,6 +10,10 @@
.dialog-container {
z-index: z("modal", "dialog");
display: flex;
// fixes modal placement on Android when keyboard is visible
html.keyboard-visible:not(.ios-device) & {
height: calc(100% - env(keyboard-inset-height));
}
}
/**

15
app/assets/stylesheets/common/base/directory.scss
View File

@ -29,6 +29,9 @@
.directory-controls {
display: flex;
justify-content: space-between;
@include breakpoint("mobile-extra-large") {
display: block;
}
.total-rows {
color: var(--primary-medium);
font-weight: normal;
@ -39,6 +42,18 @@
margin-bottom: 0.5em;
color: var(--primary-medium);
font-size: var(--font-down-1);
@include breakpoint("mobile-extra-large") {
margin-bottom: 1em;
}
}
@include breakpoint("mobile-extra-large") {
.period-chooser-header h2.selected-name {
font-size: var(--font-up-1);
}
.filter-name {
width: 100%;
}
}
}

1
app/assets/stylesheets/common/base/discourse.scss
View File

@ -620,6 +620,7 @@ textarea {
}
#main {
position: relative;
img.avatar {
&.header {
width: 45px;

63
app/assets/stylesheets/common/base/edit-category.scss
View File

@ -8,6 +8,9 @@ div.edit-category {
grid-row-gap: 1em;
grid-column-gap: 1.5em;
grid-template-areas: "header header" "sidebar content" "sidebar warning" "sidebar footer";
@include breakpoint("mobile-extra-large") {
display: block;
}
.edit-category-title-bar {
grid-area: header;
@ -17,6 +20,21 @@ div.edit-category {
align-self: start;
background-color: var(--primary-very-low);
padding: 20px;
@include breakpoint("mobile-extra-large") {
justify-content: start;
align-items: center;
padding-bottom: 1em;
.menu-toggle {
order: 1;
margin-right: 1em;
}
h2 {
order: 2;
margin-bottom: 0;
@include ellipsis;
}
}
.category-back {
height: 2em;
@ -27,13 +45,52 @@ div.edit-category {
.edit-category-nav {
grid-area: sidebar;
grid-row: 2 / span 3;
@include breakpoint("mobile-extra-large") {
width: 100%;
background-color: var(--secondary);
position: relative;
border-top: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
margin: 0.5em 0;
overflow: hidden;
&:after {
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
content: "";
position: absolute;
right: 0px;
height: 100%;
width: 30px;
}
}
.nav-stacked {
background-color: var(--secondary);
@include breakpoint("mobile-extra-large") {
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: scroll;
display: inline-flex;
width: 100%;
margin-bottom: 0;
li {
font-size: var(--font-down-1);
border-bottom: none;
}
a.active::after {
display: none;
}
}
}
}
.edit-category-content {
grid-area: content;
@include breakpoint("mobile-extra-large") {
padding: 0.5em;
}
}
#list-area & h2 {
@ -158,7 +215,11 @@ div.edit-category {
display: flex;
justify-content: space-between;
align-self: start;
padding: 0 1.5em 2em 0;
padding-block: 0 2em;
padding-inline: 1.5em 0;
@include breakpoint("mobile-extra-large") {
padding-inline: 0.5em;
}
}
.category-topic-auto-close-hours,

19
app/assets/stylesheets/common/base/emoji.scss
View File

@ -49,6 +49,16 @@ sup img.emoji {
height: 320px;
max-height: 50vh;
max-width: 420px;
@include breakpoint("mobile-extra-large") {
border: none;
position: fixed;
width: 100%;
max-width: 100vh;
top: 0;
left: 0;
border-bottom: 1px solid var(--primary-low);
min-height: 50vh;
}
img.emoji {
// custom emojis might import images of various sizes
@ -119,6 +129,15 @@ sup img.emoji {
display: none;
}
}
@include breakpoint("mobile-extra-large") {
img.emoji {
// custom emojis might import images of various sizes
// we don't want them to be deformed in the picker
width: 28px !important;
height: 28px !important;
}
}
}
.emoji-picker-category-buttons {

14
app/assets/stylesheets/desktop/invite-signup.scss → app/assets/stylesheets/common/base/invite-signup.scss
View File

@ -23,3 +23,17 @@
padding-bottom: 1em;
}
}
@include breakpoint("mobile-extra-large") {
.invites-show {
box-sizing: border-box;
padding: 1em;
.invitation-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 2rem;
}
}
}

22
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -7,6 +7,10 @@ $meta-element-margin: 6px;
&:hover .meta {
opacity: 0.9;
transition: opacity 0.5s;
@include breakpoint("mobile-extra-large") {
opacity: 0.7;
transition: none;
}
}
}
@ -45,6 +49,13 @@ $meta-element-margin: 6px;
transition: opacity 0.2s;
display: flex;
align-items: center;
@include breakpoint("mobile-extra-large") {
background: var(--secondary);
color: var(--primary-high);
height: 25px;
width: 25px;
right: 0;
}
.filename {
margin: $meta-element-margin;
@ -68,6 +79,17 @@ $meta-element-margin: 6px;
flex-shrink: 0;
flex-grow: 3;
}
@include breakpoint("mobile-extra-large") {
.filename,
.informations,
.d-icon-far-image {
display: none;
}
.d-icon-discourse-expand {
color: var(--primary-high);
}
}
}
.mfp-preloader .spinner {

12
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -111,6 +111,15 @@
flex: 0;
}
@include breakpoint("mobile-extra-large") {
.panel-body-contents {
height: 100%;
.quick-access-panel li {
padding-block: 0.15em;
}
}
}
.menu-tabs-container {
display: flex;
flex-direction: column;
@ -129,6 +138,9 @@
position: relative;
border-radius: 0;
padding: 0.857em;
@include breakpoint("mobile-extra-large") {
padding: 1.2em 1.4em;
}
@media screen and (max-height: 400px) {
// helps with 400% zoom level
font-size: var(--font-down-1);

98
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -34,6 +34,9 @@
display: flex;
flex-direction: row;
margin-top: 1em;
@include breakpoint("mobile-extra-large") {
flex-direction: column;
}
.reviewable-list {
flex: 1;
@ -41,16 +44,42 @@
max-width: 760px; // Match topic post width
min-width: 0;
margin-right: auto;
@include breakpoint("mobile-extra-large") {
order: 2;
width: 100%;
padding-bottom: 4em;
}
}
.reviewable-filters {
width: 250px;
height: 100%;
box-sizing: border-box;
@include breakpoint("mobile-extra-large") {
order: 1;
margin: 0;
padding: 0.5em;
width: 100%;
background-color: var(--primary-very-low);
padding: 0.5em 1em 1em 1em;
margin-bottom: 1em;
.reviewable-filters-actions {
display: flex;
justify-content: space-between;
}
.reviewable-filter {
.filter-label {
margin: 0;
}
}
}
}
.reviewable-list + .reviewable-filters {
margin-left: 1em;
@include breakpoint("mobile-extra-large") {
margin: 0 0 0.5em 0;
}
}
}
}
@ -218,7 +247,7 @@
.reviewable-item {
background: var(--primary-very-low);
padding: 1.5rem;
padding: 1.5rem 1.5rem 1rem 1.5rem;
.topic-statuses {
font-size: var(--font-up-2);
@ -270,6 +299,15 @@
margin: 1.5rem 0 1rem;
background: var(--secondary);
padding: 1rem;
@include breakpoint("mobile-extra-large") {
.reviewable-post-header,
.post-body {
max-width: 100%;
p {
overflow-x: scroll;
}
}
}
}
.reviewable-actions {
@ -277,6 +315,17 @@
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
@include breakpoint("mobile-extra-large") {
margin-right: -0.5em;
margin-bottom: 0.5em;
> div,
> button {
margin-right: 0.25em;
}
.btn.reviewable-action {
margin-bottom: 0;
}
}
button {
white-space: nowrap;
@ -297,8 +346,20 @@
.reviewable-action-dropdown {
margin-right: 0.5em;
}
@include breakpoint("mobile-extra-large") {
.reviewable-action,
.reviewable-action-dropdown .dropdown-select-box-header {
display: flex;
align-items: center;
justify-content: center;
.d-icon {
margin: 0 0.15 0 0;
}
}
}
}
padding-bottom: 1em;
}
.reviewable-stale {
@ -325,11 +386,27 @@
margin-top: 1rem;
min-width: 50%;
color: var(--primary-high);
@include breakpoint("mobile-extra-large") {
display: flex;
width: 100%;
overflow-x: scroll;
border-top: 1px solid var(--primary-low);
}
&__table-wrapper {
overflow-x: scroll;
}
@include breakpoint("mobile-extra-large") {
thead {
tr {
display: flex;
flex-direction: column;
border: 0;
}
}
}
th {
white-space: nowrap;
}
@ -371,6 +448,17 @@
tbody {
border-width: 1px;
@include breakpoint("mobile-extra-large") {
display: flex;
border: 0;
.reviewable-score {
display: flex;
flex-direction: column;
}
tr {
border: 0;
}
}
td {
white-space: nowrap;
vertical-align: baseline;
@ -396,6 +484,12 @@
}
}
@include breakpoint("mobile-extra-large") {
.reviewable-scores-and-history table {
width: 100%;
}
}
.reviewable-score-reason {
margin: 0.5em 0;
max-width: var(--topic-body-width);

10
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -9,6 +9,9 @@
--d-sidebar-row-horizontal-padding: 1rem;
// ems so height is variable along with font size
--d-sidebar-row-height: 2.2em;
@include breakpoint(mobile-extra-large) {
--d-sidebar-row-height: 2.4em;
}
--d-sidebar-background: var(--secondary);
--d-sidebar-admin-background: var(--primary-very-low);
@ -177,9 +180,11 @@
.row-wrapper {
display: grid;
grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em;
@include breakpoint(mobile-extra-large) {
grid-template-columns: 4.5em repeat(2, 1fr) 2em;
}
padding: 0.55em 0 0.7em;
-webkit-user-drag: none;
user-drag: none;
cursor: default;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
@ -201,6 +206,9 @@
}
.link-icon {
grid-column: 2;
@include breakpoint(mobile-extra-large) {
grid-column: 1;
}
}
.input-group {

19
app/assets/stylesheets/common/components/more-topics.scss
View File

@ -6,6 +6,10 @@
.nav {
margin-block: 0;
top: 2px;
@include breakpoint(mobile-extra-large) {
margin-block: 0 7px;
border-bottom: 1px solid var(--primary-low);
}
li {
.btn {
color: var(--primary);
@ -70,4 +74,19 @@
.more-topics__browse-more {
padding-left: 0.5em;
}
@include breakpoint("mobile-extra-large") {
.more-content-topics {
padding: 15px 0 15px 0;
.badge-category,
.badge-category-parent {
font-size: var(--font-down-1);
vertical-align: top;
}
.suggested-topics-message {
margin-top: 1em;
}
}
}
}

31
app/assets/stylesheets/common/components/signup-progress-bar.scss
View File

@ -1,12 +1,24 @@
$progress-bar-line-width: 2px;
$progress-bar-circle-size: 1.2rem;
$progress-bar-icon-size: 0.8rem;
@include breakpoint(mobile-extra-large) {
$progress-bar-circle-size: 0.5rem;
}
.signup-progress-bar {
width: 100%;
display: flex;
box-sizing: border-box;
margin-bottom: 1.2em;
@include breakpoint(mobile-extra-large) {
width: auto;
margin: 1.5rem 1.2rem;
gap: 1rem;
.account-created &,
.activate-account & {
margin-inline: 0;
}
}
&__segment {
width: 100%;
@ -14,6 +26,9 @@ $progress-bar-icon-size: 0.8rem;
flex-direction: column;
gap: 0.5rem;
color: var(--primary-low-mid);
@include breakpoint(mobile-extra-large) {
width: auto;
}
&:first-child .signup-progress-bar__circle {
transform: translateX(50%);
@ -80,11 +95,20 @@ $progress-bar-icon-size: 0.8rem;
border-radius: 50%;
border: $progress-bar-line-width solid var(--primary-low-mid);
background-color: var(--secondary);
@include breakpoint("mobile-extra-large") {
height: $progress-bar-circle-size;
width: $progress-bar-circle-size;
transform: none !important;
}
.--active & {
border-color: var(--success);
background: var(--success);
box-shadow: 0 0 1px 5px var(--success-low);
@include breakpoint("mobile-extra-large") {
background: var(--success);
box-shadow: 0 0 1px 5px var(--success-low);
}
}
.--completed & {
background-color: var(--success);
@ -95,4 +119,11 @@ $progress-bar-icon-size: 0.8rem;
&__line.--completed {
background-color: var(--success);
}
&__step-text,
&__line {
@include breakpoint("mobile-extra-large") {
display: none;
}
}
}

6
app/assets/stylesheets/common/components/topic-map.scss
View File

@ -392,6 +392,12 @@ body:not(.archetype-private_message) {
background: var(--d-hover);
}
}
@include breakpoint("mobile-extra-large") {
a {
padding: 0;
}
}
}
.topic-link {

8
app/assets/stylesheets/common/components/user-stream-item.scss
View File

@ -126,6 +126,9 @@
font-size: var(--font-0);
max-width: 400px;
@include ellipsis;
@include breakpoint("mobile-extra-large") {
vertical-align: middle;
}
}
.edit-reason {
@ -159,6 +162,11 @@
.group-member-info {
display: flex;
@include breakpoint("mobile-extra-large") {
.name {
vertical-align: inherit;
}
}
}
}

19
app/assets/stylesheets/common/components/welcome-header.scss
View File

@ -1,24 +1,35 @@
.login-welcome-header {
box-sizing: border-box;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
overflow-wrap: anywhere;
.login-title {
font-size: var(--font-up-6);
margin: 0;
line-height: var(--line-height-medium);
font-size: var(--font-up-6);
@include breakpoint(mobile-extra-large) {
font-size: var(--font-up-5);
}
}
.login-subheader {
font-size: var(--font-up-1);
margin: 0;
font-size: var(--font-up-1);
@include breakpoint(mobile-extra-large) {
font-size: var(--font-0);
}
}
.waving-hand {
width: 35px;
height: 35px;
margin-left: 0.5em;
align-self: center;
width: 35px;
height: 35px;
@include breakpoint(mobile-extra-large) {
width: 30px;
height: 30px;
}
}
}

1
app/assets/stylesheets/desktop/_index.scss
View File

@ -3,7 +3,6 @@
@import "compose";
@import "discourse";
@import "header";
@import "invite-signup";
@import "latest-topic-list";
@import "menu-panel";
@import "modal";

4
app/assets/stylesheets/desktop/header.scss
View File

@ -22,10 +22,6 @@
}
}
#main {
position: relative;
}
.search-link .blurb {
color: var(--secondary-medium);
display: block;

18
app/assets/stylesheets/mobile/_index.scss
View File

@ -1,21 +1,6 @@
@import "admin_badges";
@import "admin_customize";
@import "admin_flags";
@import "admin_report_counters";
@import "admin_report_table";
@import "admin_report";
@import "admin_reports";
@import "alert";
@import "compose";
@import "dashboard";
@import "dialog";
@import "directory";
@import "discourse";
@import "edit-category";
@import "emoji";
@import "header";
@import "invite-signup";
@import "lightbox";
@import "menu-panel";
@import "list-controls";
@import "login-modal";
@ -26,9 +11,6 @@
@import "personal-message";
@import "post-action-feedback";
@import "push-notifications-mobile";
@import "reviewables";
@import "sidebar";
@import "signup-progress-bar";
@import "topic-list";
@import "topic-post";
@import "topic";

37
app/assets/stylesheets/mobile/admin_badges.scss
View File

@ -1,37 +0,0 @@
.mobile-view {
.admin-badges {
.badges {
margin: 0 0.25em;
.content-list {
flex: 0 0 100%;
width: 100%;
.admin-badge-list {
max-height: 40vh;
margin-right: 0;
}
}
}
.badge-intro {
flex: 0 1 75%;
}
.current-badge {
margin: 20px 0;
width: 100%;
textarea {
width: 100%;
}
}
input[type="text"] {
width: 100%;
}
}
.badges-header .create-new-badge .btn-default {
.d-button-label {
display: none;
}
.d-icon {
margin-right: 0;
}
}
}

49
app/assets/stylesheets/mobile/admin_customize.scss
View File

@ -1,49 +0,0 @@
body .admin-customize {
.show-current-style {
padding: 0;
width: 100%;
}
.themes-list,
.color-schemes {
width: 100%;
margin-bottom: 1em;
}
.admin-container {
display: flex;
flex-wrap: wrap;
padding: 0;
}
.content-list.color-schemes ul {
max-height: 250px;
overflow-x: auto;
}
.color-scheme {
h1,
h1 input {
width: 100%;
}
.copy-to-clipboard {
display: none;
}
.controls,
.admin-controls {
width: 100%;
}
.sp-replacer {
flex-shrink: 0;
}
td {
vertical-align: top;
}
td.actions {
width: 40px;
}
}
}

7
app/assets/stylesheets/mobile/admin_flags.scss
View File

@ -1,7 +0,0 @@
.admin-contents table.grid tr.admin-flag-item {
grid-template-columns: auto min-content;
.d-toggle-switch {
margin-right: 0;
}
}

21
app/assets/stylesheets/mobile/admin_report.scss
View File

@ -1,21 +0,0 @@
.admin-report.post-edits {
.admin-report-table {
.report-table {
thead tr th.edit_reason,
tbody tr td.edit_reason {
width: auto;
}
}
}
}
.admin-report.trending-search {
.admin-report-table {
.report-table {
thead tr th.term,
tbody tr td.term {
width: 50%;
}
}
}
}

5
app/assets/stylesheets/mobile/admin_report_counters.scss
View File

@ -1,5 +0,0 @@
.counters-list {
.counters-header .counters-cell {
font-weight: normal;
}
}

32
app/assets/stylesheets/mobile/admin_report_table.scss
View File

@ -1,32 +0,0 @@
.admin-report-table {
.table {
font-size: var(--font-down-1);
}
.table .admin-report-table-header {
font-weight: 500;
border-right: 1px solid var(--primary-low);
padding: auto;
.title {
writing-mode: vertical-rl;
text-orientation: mixed;
text-align: right;
transform: rotate(180deg);
.emoji {
transform: rotate(-180deg);
}
}
.sort-btn {
display: none;
}
}
.table tbody tr td {
&.user .username {
display: none;
}
}
}

24
app/assets/stylesheets/mobile/admin_reports.scss
View File

@ -1,24 +0,0 @@
.admin-reports {
.admin-report {
.body {
flex-direction: column;
.filters {
order: 0;
margin: 0;
width: 100%;
}
.main {
order: 2;
}
.report-alert {
margin: 0;
order: 1;
flex: 1 0 0px;
padding: 1em;
}
}
}
}

7
app/assets/stylesheets/mobile/alert.scss
View File

@ -1,7 +0,0 @@
.alert.alert-info {
&.clickable {
// there are (n) new or updated topics, click to show
margin: 0;
padding: 1em;
}
}

5
app/assets/stylesheets/mobile/components/_index.scss
View File

@ -1,7 +1,2 @@
@import "bookmark-menu";
@import "more-topics";
@import "topic-footer-mobile-dropdown";
@import "topic-map";
@import "user-card";
@import "user-stream-item";
@import "welcome-header";

0
app/assets/stylesheets/mobile/components/bookmark-menu.scss
View File

19
app/assets/stylesheets/mobile/components/more-topics.scss
View File

@ -1,19 +0,0 @@
.more-topics__container {
.nav {
margin-block: 0 7px;
border-bottom: 1px solid var(--primary-low);
}
.more-content-topics {
padding: 15px 0 15px 0;
.badge-category,
.badge-category-parent {
font-size: var(--font-down-1);
vertical-align: top;
}
.suggested-topics-message {
margin-top: 1em;
}
}
}

9
app/assets/stylesheets/mobile/components/topic-map.scss
View File

@ -1,9 +0,0 @@
.fk-d-menu-modal {
&.topic-map__links-content {
li {
a {
padding: 0;
}
}
}
}

12
app/assets/stylesheets/mobile/components/user-stream-item.scss
View File

@ -1,12 +0,0 @@
// Mobile styles for "user-stream-item" component
.user-stream {
.name {
vertical-align: middle;
}
.group-member-info {
.name {
vertical-align: inherit;
}
}
}

16
app/assets/stylesheets/mobile/components/welcome-header.scss
View File

@ -1,16 +0,0 @@
.login-welcome-header {
box-sizing: border-box;
.login-title {
font-size: var(--font-up-5);
}
.login-subheader {
font-size: var(--font-0);
}
.waving-hand {
width: 30px;
height: 30px;
}
}

32
app/assets/stylesheets/mobile/dashboard.scss
View File

@ -1,32 +0,0 @@
.dashboard-next {
.activity-metrics .counters-list {
font-size: var(--font-down-1);
}
.navigation a.navigation-link {
padding: 0.4em;
font-size: var(--font-down-1);
.emoji {
width: 1.3em;
height: 1.3em;
margin-right: 0;
}
}
.dashboard-new-features .section-body {
grid-template-columns: none;
}
.admin-new-feature-item {
&__new-feature-emoji {
padding-left: 0em;
}
}
}
.admin-new-feature-item {
h3 {
margin-right: 0.5em;
}
&__new-feature-version {
font-size: var(--font-down-1);
}
}

6
app/assets/stylesheets/mobile/dialog.scss
View File

@ -1,6 +0,0 @@
.dialog-container {
// fixes modal placement on Android when keyboard is visible
html.keyboard-visible:not(.ios-device) & {
height: calc(100% - env(keyboard-inset-height));
}
}

24
app/assets/stylesheets/mobile/directory.scss
View File

@ -1,24 +0,0 @@
.directory {
.period-chooser .period-chooser-header h2.selected-name {
font-size: var(--font-up-1);
}
&.users-directory {
.filter-name {
width: 100%;
}
.directory-last-updated {
margin-bottom: 1em;
}
}
.directory-controls {
display: block;
}
.total-rows {
color: var(--primary-medium);
padding: 5px;
}
}

9
app/assets/stylesheets/mobile/discourse.scss
View File

@ -116,11 +116,6 @@ blockquote {
// Special elements
#main-outlet-wrapper {
margin-left: unset;
margin-right: unset;
}
#main-outlet {
padding-top: 1.25em;
&:after {
@ -130,7 +125,3 @@ blockquote {
transition: opacity 0.2s;
}
}
#main {
position: relative;
}

66
app/assets/stylesheets/mobile/edit-category.scss
View File

@ -1,66 +0,0 @@
div.edit-category {
display: block;
.edit-category-nav {
width: 100%;
background-color: var(--secondary);
position: relative;
border-top: 1px solid var(--primary-low);
border-bottom: 1px solid var(--primary-low);
margin: 0.5em 0;
overflow: hidden;
&:after {
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
content: "";
position: absolute;
right: 0px;
height: 100%;
width: 30px;
}
}
.nav-stacked {
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: scroll;
display: inline-flex;
width: 100%;
margin-bottom: 0;
li {
font-size: var(--font-down-1);
border-bottom: none;
}
a.active::after {
display: none;
}
}
.edit-category-title-bar {
justify-content: start;
align-items: center;
padding-bottom: 1em;
.menu-toggle {
order: 1;
margin-right: 1em;
}
h2 {
order: 2;
margin-bottom: 0;
@include ellipsis;
}
}
.edit-category-content {
padding: 0.5em;
}
.edit-category-footer {
padding: 0 0.5em 2em 0.5em;
}
}

18
app/assets/stylesheets/mobile/emoji.scss
View File

@ -1,18 +0,0 @@
.emoji-picker {
border: none;
position: fixed;
width: 100%;
max-width: 100vh;
top: 0;
left: 0;
border-bottom: 1px solid var(--primary-low);
min-height: 50vh;
.emoji-picker-emoji-area {
img.emoji {
// custom emojis might import images of various sizes
// we don't want them to be deformed in the picker
width: 28px !important;
height: 28px !important;
}
}
}

11
app/assets/stylesheets/mobile/invite-signup.scss
View File

@ -1,11 +0,0 @@
.invites-show {
box-sizing: border-box;
padding: 1em;
.invitation-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 2rem;
}
}

25
app/assets/stylesheets/mobile/lightbox.scss
View File

@ -1,25 +0,0 @@
.lightbox .meta,
.lightbox:hover .meta {
opacity: 0.7;
transition: none;
}
.meta {
align-items: center;
background: var(--secondary);
color: var(--primary-high);
height: 25px;
width: 25px;
bottom: 0;
right: 0;
.filename,
.informations,
.d-icon-far-image {
display: none;
}
.d-icon-discourse-expand {
color: var(--primary-high);
}
}

19
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -1,22 +1,3 @@
.panel-body-contents {
// 2em padding very useful for iOS Safari's overlayed bottom nav
// padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
.user-menu.revamped & {
height: 100%;
.quick-access-panel li {
padding-block: 0.15em;
}
}
}
.tabs-list .btn {
.user-menu.revamped & {
padding: 1.2em 1.4em;
}
}
.hamburger-panel .revamped {
--d-sidebar-row-horizontal-padding: 1rem;
--d-sidebar-highlight-backgrond: var(--primary-low);

110
app/assets/stylesheets/mobile/reviewables.scss
View File

@ -1,110 +0,0 @@
.reviewable {
.reviewable-container {
flex-direction: column;
.reviewable-list {
order: 2;
width: 100%;
padding-bottom: 4em;
}
.reviewable-filters {
order: 1;
margin: 0;
padding: 0.5em;
width: 100%;
}
.reviewable-list + .reviewable-filters {
margin: 0 0 0.5em 0;
}
}
.reviewable-scores {
display: flex;
width: 100%;
overflow-x: scroll;
border-top: 1px solid var(--primary-low);
thead {
tr {
display: flex;
flex-direction: column;
border: 0;
}
}
tbody {
display: flex;
border: 0;
.reviewable-score {
display: flex;
flex-direction: column;
}
tr {
border: 0;
}
td {
white-space: nowrap;
}
}
}
}
.reviewable-filters {
background-color: var(--primary-very-low);
padding: 0.5em 1em 1em 1em;
margin-bottom: 1em;
.reviewable-filters-actions {
display: flex;
justify-content: space-between;
}
.reviewable-filter {
.filter-label {
margin: 0;
}
}
}
.reviewable-contents {
.reviewable-post-header,
.post-body {
max-width: 100%;
p {
overflow-x: scroll;
}
}
}
.reviewable-actions {
margin-right: -0.5em;
margin-bottom: 0.5em;
> div,
> button {
margin-right: 0.25em;
}
.btn.reviewable-action {
margin-bottom: 0;
}
.reviewable-action,
.reviewable-action-dropdown .dropdown-select-box-header {
display: flex;
align-items: center;
justify-content: center;
.d-icon {
margin: 0 0.15 0 0;
}
}
}
.reviewable-scores-and-history table {
width: 100%;
}

12
app/assets/stylesheets/mobile/sidebar.scss
View File

@ -1,12 +0,0 @@
:root {
--d-sidebar-row-height: 2.4em;
}
.sidebar-section-form-modal {
.row-wrapper {
grid-template-columns: 4.5em repeat(2, 1fr) 2em;
.link-icon {
grid-column: 1;
}
}
}

30
app/assets/stylesheets/mobile/signup-progress-bar.scss
View File

@ -1,30 +0,0 @@
$progress-bar-circle-size: 0.5rem;
.signup-progress-bar {
width: auto;
margin: 1.5rem 1.2rem;
gap: 1rem;
.account-created &,
.activate-account & {
margin-inline: 0;
}
&__segment {
width: auto;
}
&__circle {
height: $progress-bar-circle-size;
width: $progress-bar-circle-size;
transform: none !important;
.--active & {
background: var(--success);
box-shadow: 0 0 1px 5px var(--success-low);
}
}
&__step-text,
&__line {
display: none;
}
}