hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'threecolumn' into shigusegubu-vue3

Browse source 
* threecolumn:
  make panel height property private since it relies on font size
  better formatting
  reduce height of post form by default
This commit is contained in:
Henry Jameson 2022-04-26 00:11:33 +03:00
commit bb18ff7fc3
5 changed files with 15 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -440,6 +440,8 @@ textarea,
height: unset; height: unset;
} }
--padding: 0.5em;
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
@ -456,10 +458,10 @@ textarea,
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 2em; height: 2.4em;
line-height: 1.2; line-height: 1.2;
hyphens: none; hyphens: none;
padding: 8px 0.5em; padding: var(--padding);
&:disabled, &:disabled,
&[disabled=disabled], &[disabled=disabled],

5
src/components/conversation/conversation.vue
View file

@ -251,14 +251,11 @@
.thread-ancestor-has-other-replies .conversation-status, .thread-ancestor-has-other-replies .conversation-status,
.thread-ancestor:last-child .conversation-status, .thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box, .thread-ancestor:last-child .thread-ancestor-dive-box,
&:last-child .conversation-status,
&.-expanded .thread-tree .conversation-status { &.-expanded .thread-tree .conversation-status {
border-bottom: none; border-bottom: none;
} }
&:last-child .conversation-status {
border-bottom: none;
}
.thread-ancestors + .thread-tree > .conversation-status { .thread-ancestors + .thread-tree > .conversation-status {
border-top-width: 1px; border-top-width: 1px;
border-top-style: solid; border-top-style: solid;

10
src/components/post_status_form/post_status_form.vue
View file

@ -507,12 +507,14 @@
} }
.form-post-body { .form-post-body {
resize: none; box-sizing: content-box;
overflow: hidden; overflow: hidden;
transition: min-height 200ms 100ms; transition: min-height 200ms 100ms;
padding-bottom: 1.75em; padding-bottom: calc(var(--padding) + 1.2em);
min-height: 2em; // Because we changed box-sizing original height values are no longer correct
box-sizing: content-box; height: 1.2em;
min-height: 1.2em;
resize: none;
&.scrollable-form { &.scrollable-form {
overflow-y: auto; overflow-y: auto;

2
src/components/timeline/timeline.scss
View file

@ -10,7 +10,7 @@
} }
.conversation-heading { .conversation-heading {
top: calc(var(--panel-heading-height) * 2); top: calc(var(--__panel-heading-height) * 2);
} }
&.-nonpanel { &.-nonpanel {

6
src/panel.scss
View file

@ -33,9 +33,9 @@
} }
.panel-heading { .panel-heading {
--panel-heading-height: 3.2em;
--panel-heading-height-padding: 0.6em; --panel-heading-height-padding: 0.6em;
--__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding)); --__panel-heading-height: 3.2em;
--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -55,7 +55,7 @@
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
align-items: center; align-items: center;
height: var(--panel-heading-height); height: var(--__panel-heading-height);
z-index: 2; z-index: 2;
&.-flexible-height { &.-flexible-height {