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
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);
}
}