shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile: topic list, topic view, sidebar tweaks

Browse Source
This commit is contained in:
chapoi
2025-03-10 23:50:13 +08:00
committed by GitHub
parent 9e96704c24
commit fc97ab99fe
10 changed files with 133 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/mobile.scss
-3
View File
@@ -1,3 +0,0 @@
#main-outlet-wrapper {
padding: 0;
}
scss/buttons.scss
+18 -35
View File
@@ -35,25 +35,12 @@
}
.discourse-no-touch .btn-default.sidebar-new-topic-button,
.discourse-no-touch .interface-color-selector-content .btn-default {
border: none;
&:hover {
border: none;
box-shadow: none;
}
}
.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
border: none;
margin-left: 2px;
&:hover {
border: none;
box-shadow: none;
}
}
.btn-default {
border: 1px solid var(--primary-300);
.discourse-no-touch .interface-color-selector-content,
.btn-default,
.select-kit .select-kit-header {
border: 1px solid var(--accent-color);
//id like to use rgba of the accent colour but how to derive that?
// box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
background: var(--secondary);
.d-icon {
@@ -62,10 +49,10 @@
&:hover {
.discourse-no-touch & {
border: 1px solid var(--accent-color);
border: 1px solid transparent;
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
background: var(--secondary);
color: var(--primary);
color: var(--accent-color);
.d-icon {
color: var(--accent-color);
}
@@ -86,12 +73,10 @@
//not shared with select-kit
.btn-default {
&:active {
.discourse-no-touch & {
color: var(--secondary);
background: oklch(from var(--accent-color) 30% c h) !important;
.d-icon {
color: var(--secondary);
background: oklch(from var(--accent-color) 30% c h) !important;
.d-icon {
color: var(--secondary);
}
}
}
}
@@ -126,15 +111,13 @@
}
}
&:active {
.discourse-no-touch & {
// background: radial-gradient(
// 65% 95% at 50% 50%,
// rgba(0, 0, 0, 0.4) 0%,
// rgba(0, 0, 0, 0) 100%
// ),
// var(--accent-color) !important;
background: oklch(from var(--accent-color) 30% c h) !important;
}
// background: radial-gradient(
// 65% 95% at 50% 50%,
// rgba(0, 0, 0, 0.4) 0%,
// rgba(0, 0, 0, 0) 100%
// ),
// var(--accent-color) !important;
background: oklch(from var(--accent-color) 30% c h) !important;
}
}
scss/main.scss
+5 -4
View File
@@ -82,15 +82,16 @@ body:not(.has-full-page-chat) {
.container.badges,
.topic-above-footer-buttons-outlet .presence-users,
.global-notice {
max-width: 1000px;
margin-inline: auto;
padding-inline: 1.5em;
@include breakpoint(extra-large, $rule: min-width) {
max-width: 1000px;
margin-inline: auto;
padding-inline: var(--spacing-inline-l);
}
}
border-radius: var(--d-border-radius-large);
@include breakpoint(medium) {
border-radius: 0px;
}
border-radius: 1.25rem;
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
background-color: var(--d-content-background);
}
scss/misc.scss
+5 -4
View File
@@ -44,7 +44,8 @@
padding: 3px;
}
a,
a:visited {
color: var(--accent-color);
}
//alas too broad, is overruling links that we made grey because they are minor, for exmaple, date link on a post, dont have alternative yet
// a,
// a:visited {
// color: var(--accent-color);
// }
scss/mobile-stuff.scss
+78 -19
View File
@@ -6,7 +6,7 @@
}
}
#main-outlet-wrapper {
.navigation-topics & {
*[class*="navigation-"] & {
@include breakpoint(mobile-extra-large) {
padding: 0;
}
@@ -32,7 +32,9 @@
.category-breadcrumb.hidden,
.category-breadcrumb {
display: flex !important;
gap: var(--spacing-inline-sm);
column-gap: var(--spacing-inline-s);
row-gap: var(--spacing-block-xs);
flex-basis: 100%;
.select-kit-header {
padding-block: var(--spacing-block-s);
padding-inline: 0;
@@ -98,30 +100,48 @@
#topic-title {
@include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-m) !important;
.title-wrapper {
gap: var(--spacing-block-s);
}
.topic-category {
order: -1;
}
//make mixin of this
// .badge-category__wrapper {
// border-radius: var(--d-border-radius);
// padding: var(--spacing-inline-xs) var(--spacing-inline-s);
// background-color: light-dark(
// oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
// oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
// );
// }
.badge-category__wrapper {
font-size: var(--font-down-2-rem);
border-radius: var(--d-border-radius);
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
background-color: light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
border: 1px solid
light-dark(
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
);
}
// .badge-category__name {
// color: light-dark(
// oklch(from var(--category-badge-color) 20% calc(c * 1) h),
// oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
// );
// }
.badge-category__name {
color: light-dark(
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
);
}
.discourse-tag {
font-size: var(--font-down-2-rem);
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
gap: var(--spacing-inline-xs);
border-radius: var(--d-border-radius-large);
border: 1px solid var(--primary-low-mid);
background: var(--secondary);
}
}
}
.container.posts {
@include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-m) !important;
padding-inline: var(--spacing-inline-xs) !important;
.main-avatar .avatar {
width: 40px;
@@ -137,11 +157,50 @@
}
.contents {
padding-top: var(--spacing-block-m);
p {
line-height: 1.65;
}
}
.small-action {
&-desc {
padding: var(--spacing-block-xs) 0;
}
//for core eventually, better way imo
.topic-avatar {
padding-top: 0;
align-items: center;
.d-icon {
font-size: var(--font-up-1);
}
}
}
}
}
#topic-footer-buttons {
@include breakpoint(mobile-extra-large) {
padding-inline: var(--spacing-inline-xs) !important;
}
}
}
//should be changed in core, should not be a primary btn
//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
#topic-progress-wrapper {
.progress-back-container {
margin-right: 0;
margin-bottom: var(--spacing-block-xs);
.btn-primary.progress-back {
border-radius: 0;
background: var(--secondary);
border: 1px solid var(--tertiary-low);
color: var(--accent-color);
padding: var(--spacing-inline-s) var(--spacing-inline-m);
.d-icon {
color: var(--accent-color);
}
}
}
.topic-admin-menu-trigger {
border-radius: 0;
border: 1px solid var(--tertiary-low);
}
}
scss/search-banner.scss
+2 -3
View File
@@ -7,13 +7,12 @@
border-bottom: 1px solid var(--primary-300);
padding: 1.5em 0 2.5em;
margin-bottom: 0;
@media screen and (max-width: 900px) {
padding-bottom: 1em;
@media screen and (max-width: 600px) {
padding: 1em;
}
h1 {
grid-column: 1/2;
grid-row: 1/-1;
padding: 0 1em;
text-align: left;
align-self: center;
margin: 0;
scss/sidebar.scss
+17 -6
View File
@@ -1,8 +1,12 @@
.sidebar-wrapper {
.sidebar-wrapper,
.sidebar-hamburger-dropdown {
@include breakpoint(medium) {
background: var(--secondary);
.sidebar-footer-wrapper {
background: var(--secondary);
.sidebar-footer-container::before {
display: none;
}
}
}
.has-full-page-chat &,
@@ -18,9 +22,6 @@
}
.sidebar-section-link {
font-size: var(--font-up-1);
// dont want to change fonts here just yet as font-size can be changed as a user pref.
// – charlie: sure but I want it to be bigger by default
// letter-spacing: 0.5px;
transition: none;
border-radius: var(--d-border-radius);
}
@@ -28,8 +29,16 @@
border-radius: 0px;
}
}
.sidebar-section-wrapper {
padding-block: 0.45em;
@include breakpoint(extra-large, $rule: min-width) {
padding-block: 0.45em;
}
@include breakpoint(mobile-extra-large) {
.hamburger-panel .revamped & {
margin-bottom: var(--spacing-block-m);
}
}
.sidebar-section-header {
font-size: var(--font-down-1);
}
@@ -37,7 +46,9 @@
margin: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-block-xs);
@include breakpoint(extra-large, $rule: min-width) {
gap: var(--spacing-block-xs);
}
}
}
scss/topic-cards.scss
+7 -5
View File
@@ -107,6 +107,9 @@ body.user-messages-page .topic-list-item {
grid-template-areas:
"avatar author status status . . activity"
". topic-title topic-title topic-title likes-replies likes-replies category";
grid-column-gap: 12px;
grid-row-gap: 8px;
border-radius: var(--d-border-radius);
&.excerpt-expanded {
grid-template-columns: 44px repeat(6, 1fr) auto;
grid-template-rows: 22px auto auto 30px;
@@ -134,9 +137,6 @@ body.user-messages-page .topic-list-item {
}
}
}
grid-column-gap: 12px;
grid-row-gap: 8px;
border-radius: var(--d-border-radius);
@media screen and (max-width: $medium) {
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
grid-template-rows: 22px minmax(22px, auto);
@@ -361,7 +361,9 @@ body.user-messages-page .topic-list-item {
background: var(--d-content-background);
box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
&:hover {
border: 1px solid var(--accent-color);
background: var(--d-content-background);
.discourse-no-touch & {
border: 1px solid var(--accent-color);
background: var(--d-content-background);
}
}
}
scss/topic.scss
-9
View File
@@ -50,21 +50,12 @@
@include breakpoint(extra-large, $rule: min-width) {
z-index: z("composer", "content") - 1;
padding: var(--spacing-block-l) var(--spacing-inline-xl);
position: sticky;
margin-bottom: 0;
top: var(--header-offset);
background: var(--d-content-background);
}
z-index: z("composer", "content") - 1;
padding: var(--spacing-block-l) var(--spacing-inline-xl);
position: sticky;
margin-bottom: 0;
top: var(--header-offset);
background: var(--d-content-background);
border-radius: var(--d-border-radius-large);
}
.container.posts,
.more-topics__container,
#topic-footer-buttons {
padding: 0 24px;
}
scss/variables.scss
+1 -1
View File
@@ -1,5 +1,5 @@
:root {
--accent-color: #393edb;
--accent-color: #595bca;
--background-color: light-dark(#f5f8ff, #1b1c1e);
--search-color: light-dark(
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),