Skip to content

Commit fdcbd64

Browse files
jackdishmanjackdishman
committed
mobile view and typography
1 parent 1d2de2e commit fdcbd64

File tree

7 files changed

+119
-106
lines changed

7 files changed

+119
-106
lines changed

‎src/assets/css/quill.css

+82-75
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,6 @@
5858
line-height: 28.6px;
5959
margin-top: 0.75rem;
6060
margin-bottom: 0.75rem;
61-
6261
}
6362
.ql-editor ol > li,
6463
.ql-editor ul > li {
@@ -67,24 +66,24 @@
6766
.ql-editor ul > li::before {
6867
content: '\2022';
6968
}
70-
.ql-editor ul[data-checked=true],
71-
.ql-editor ul[data-checked=false] {
69+
.ql-editor ul[data-checked='true'],
70+
.ql-editor ul[data-checked='false'] {
7271
pointer-events: none;
7372
}
74-
.ql-editor ul[data-checked=true] > li *,
75-
.ql-editor ul[data-checked=false] > li * {
73+
.ql-editor ul[data-checked='true'] > li *,
74+
.ql-editor ul[data-checked='false'] > li * {
7675
pointer-events: all;
7776
}
78-
.ql-editor ul[data-checked=true] > li::before,
79-
.ql-editor ul[data-checked=false] > li::before {
77+
.ql-editor ul[data-checked='true'] > li::before,
78+
.ql-editor ul[data-checked='false'] > li::before {
8079
color: #777;
8180
cursor: pointer;
8281
pointer-events: all;
8382
}
84-
.ql-editor ul[data-checked=true] > li::before {
83+
.ql-editor ul[data-checked='true'] > li::before {
8584
content: '\2611';
8685
}
87-
.ql-editor ul[data-checked=false] > li::before {
86+
.ql-editor ul[data-checked='false'] > li::before {
8887
content: '\2610';
8988
}
9089
.ql-editor li::before {
@@ -383,7 +382,7 @@
383382
text-align: right;
384383
}
385384
.ql-editor.ql-blank::before {
386-
color: rgba(0,0,0,0.6);
385+
color: rgba(0, 0, 0, 0.6);
387386
content: attr(data-placeholder);
388387
font-style: italic;
389388
/* left: 15px; */
@@ -418,8 +417,8 @@
418417
.ql-bubble .ql-toolbar button:active:hover {
419418
outline: none;
420419
}
421-
.ql-bubble.ql-toolbar input.ql-image[type=file],
422-
.ql-bubble .ql-toolbar input.ql-image[type=file] {
420+
.ql-bubble.ql-toolbar input.ql-image[type='file'],
421+
.ql-bubble .ql-toolbar input.ql-image[type='file'] {
423422
display: none;
424423
}
425424
.ql-bubble.ql-toolbar button:hover,
@@ -588,56 +587,64 @@
588587
.ql-bubble .ql-direction.ql-active svg:first-child {
589588
display: none;
590589
}
591-
.ql-bubble .ql-editor h1 {
592-
font-size: 48px;
593-
line-height: 52.8px;
590+
.ql-bubble .ql-editor h1,
591+
#heading-1 {
592+
font-size: 2.25rem;
593+
line-height: 1.1111;
594594
font-family: NotoSerif, serif;
595-
font-weight: 600;
595+
font-weight: 800;
596596
margin-top: 1.5rem;
597-
margin-bottom: 0.75rem;
597+
margin-bottom: 0.8888rem;
598598
}
599-
.ql-bubble .ql-editor h2 {
600-
font-size: 29.6px;
601-
line-height: 38.48px;
599+
600+
.ql-bubble .ql-editor h2,
601+
#heading-2 {
602+
font-size: 1.5rem;
603+
line-height: 1.3333rem;
602604
font-family: NotoSerif, serif;
603-
font-weight: 600;
604-
margin-top: 1.25rem;
605-
margin-bottom: 0.75rem;
606-
}
607-
.ql-bubble .ql-editor h3 {
608-
font-size: 21.6px;
609-
line-height: 30.24px;
605+
font-weight: 700;
606+
margin-top: 2rem;
607+
margin-bottom: 1rem;
608+
}
609+
.ql-bubble .ql-editor h3,
610+
#heading-3 {
611+
font-size: 1.25rem;
612+
line-height: 1.6;
610613
font-family: NotoSerif, serif;
611614
font-weight: 600;
612-
margin-top: 1rem;
613-
margin-bottom: 0.625rem;
615+
margin-top: 1.6rem;
616+
margin-bottom: 0.6rem;
614617
}
615-
.ql-bubble .ql-editor h4 {
616-
font-size: 1em;
617-
line-height: 1.5rem;
618+
.ql-bubble .ql-editor h4,
619+
#heading-4 {
620+
font-size: 1rem;
621+
line-height: 1.5;
618622
font-family: NotoSerif, serif;
619623
font-weight: 600;
620-
margin-top: 0.75rem;
624+
margin-top: 1.5rem;
625+
margin-bottom: 0.5rem;
621626
}
622-
.ql-bubble .ql-editor h5 {
623-
font-size: 0.83em;
627+
.ql-bubble .ql-editor h5,
628+
#heading-5 {
629+
font-size: 0.83rem;
624630
line-height: 1.25rem;
625631
font-family: NotoSerif, serif;
626632
font-weight: 600;
627633
margin-top: 0.5rem;
628634
}
629-
.ql-bubble .ql-editor h6 {
630-
font-size: 0.67em;
635+
.ql-bubble .ql-editor h6,
636+
#heading-6 {
637+
font-size: 0.67rem;
631638
line-height: 1rem;
632639
font-family: NotoSerif, serif;
633640
font-weight: 600;
634641
margin-top: 0.25rem;
635642
}
636643
.ql-bubble .ql-editor p {
637-
font-size: 17.6px;
638-
line-height: 28.6px;
639-
margin-top: 0.75rem;
640-
margin-bottom: 0.75rem;
644+
font-size: 1rem;
645+
line-height: 1.5rem;
646+
margin-top: 1.25rem;
647+
margin-bottom: 1.25rem;
641648
}
642649
.ql-bubble .ql-editor a {
643650
text-decoration: underline;
@@ -779,46 +786,46 @@
779786
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
780787
content: 'Normal';
781788
}
782-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
783-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
789+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
790+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
784791
content: 'Heading 1';
785792
}
786-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
787-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
793+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
794+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
788795
content: 'Heading 2';
789796
}
790-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
791-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
797+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
798+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
792799
content: 'Heading 3';
793800
}
794-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
795-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
801+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
802+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
796803
content: 'Heading 4';
797804
}
798-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
799-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
805+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
806+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
800807
content: 'Heading 5';
801808
}
802-
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
803-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
809+
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
810+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
804811
content: 'Heading 6';
805812
}
806-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
813+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
807814
font-size: 2em;
808815
}
809-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
816+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
810817
font-size: 1.5em;
811818
}
812-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
819+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
813820
font-size: 1.17em;
814821
}
815-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
822+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
816823
font-size: 1em;
817824
}
818-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
825+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
819826
font-size: 0.83em;
820827
}
821-
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
828+
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
822829
font-size: 0.67em;
823830
}
824831
.ql-bubble .ql-picker.ql-font {
@@ -828,18 +835,18 @@
828835
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
829836
content: 'Sans Serif';
830837
}
831-
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
832-
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
838+
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
839+
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
833840
content: 'Serif';
834841
}
835-
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
836-
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
842+
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
843+
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
837844
content: 'Monospace';
838845
}
839-
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
846+
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
840847
font-family: Georgia, Times New Roman, serif;
841848
}
842-
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
849+
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
843850
font-family: Monaco, Courier New, monospace;
844851
}
845852
.ql-bubble .ql-picker.ql-size {
@@ -849,25 +856,25 @@
849856
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
850857
content: 'Normal';
851858
}
852-
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
853-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
859+
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
860+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
854861
content: 'Small';
855862
}
856-
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
857-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
863+
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
864+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
858865
content: 'Large';
859866
}
860-
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
861-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
867+
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
868+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
862869
content: 'Huge';
863870
}
864-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
871+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
865872
font-size: 10px;
866873
}
867-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
874+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
868875
font-size: 18px;
869876
}
870-
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
877+
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
871878
font-size: 32px;
872879
}
873880
.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
@@ -920,7 +927,7 @@
920927
.ql-bubble .ql-tooltip-editor {
921928
display: none;
922929
}
923-
.ql-bubble .ql-tooltip-editor input[type=text] {
930+
.ql-bubble .ql-tooltip-editor input[type='text'] {
924931
background: transparent;
925932
border: none;
926933
color: #fff;

‎src/assets/css/tailwind.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
h1 {
111111
@apply font-serif;
112112
}
113-
.editable h1 {
113+
.editable .ql-bubble .ql-editor h1 {
114114
@apply text-h1 font-serif font-semibold mt-6 mb-3;
115115
}
116116
.editable h2 {

‎src/components/AuthorCard.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="mr-5 mt-3 xl:mt-0">
2424
<FriendButton
2525
v-if="authorID !== $store.state.session.id"
26-
class="justify-self-end"
26+
class="justify-self-end hidden xl:block"
2727
:userIsFollowed="isFollowed"
2828
:toggleFriend="toggleFriend"
2929
/>

‎src/components/post/Comment.vue

+24-19
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
<div class="object-contain">
33
<!-- Component that displays a posted comment -->
44
<div class="flex w-full mt-4">
5-
<div class="flex justify-between items-start mr-4">
5+
<!-- Desktop avatar -->
6+
<div class="hidden xl:flex justify-between items-start mr-4">
67
<span class="rounded-lg px-1 pt-1 flex-shrink-0" :style="getStyle(`bg-`)">
78
<Avatar
89
:avatar="avatar"
@@ -13,15 +14,13 @@
1314
</span>
1415
</div>
1516
<!-- Dashed bubble -->
16-
<div
17-
class="border rounded-lg w-full flex flex-wrap xl:flex-no-wrap justify-between border-dashed"
18-
:style="getStyle(`border-`)"
19-
>
17+
<div class="border rounded-lg w-full flex justify-between border-dashed" :style="getStyle(`border-`)">
2018
<!-- Text -->
2119
<div class="flex flex-col flex-grow w-full px-4 py-2">
2220
<!-- Top row: name, id, timestamp -->
23-
<div class="flex flex-col xl:flex-row">
24-
<nuxt-link :to="`/id/` + authorID" class="flex flex-col xl:flex-row mr-4 items-center">
21+
<div class="flex flex-wrap">
22+
<nuxt-link :to="`/id/` + authorID" class="flex mr-4 xl:items-center">
23+
<Avatar :avatar="avatar" :authorID="authorID" size="w-8 h-8" class="xl:hidden flex-shrink-0 mr-4" />
2524
<span class="font-medium">
2625
{{ name }}
2726
</span>
@@ -32,21 +31,27 @@
3231
</span>
3332
</div>
3433
<!-- Content -->
35-
<div class="flex flex-col flex-grow w-full overflow-hidden">
36-
<p class="text-lg py-1 font-sans break-words leading-relaxed">
37-
{{ content }}
38-
</p>
39-
<div class="h-full flex flex-col-reverse">
40-
<button
41-
class="font-sans text-sm text-lightSecondaryText focus:outline-none flex-grow-0 w-24 text-left"
42-
@click="isReplying = !isReplying"
43-
>
44-
{{ replies.length }} Replies
45-
</button>
34+
<div class="flex">
35+
<div class="flex flex-col flex-grow w-full overflow-hidden">
36+
<p class="text-lg py-1 font-sans break-words leading-relaxed">
37+
{{ content }}
38+
</p>
39+
<div class="h-full flex flex-col-reverse">
40+
<button
41+
class="font-sans text-sm text-lightSecondaryText focus:outline-none flex-grow-0 w-24 text-left"
42+
@click="isReplying = !isReplying"
43+
>
44+
{{ replies.length }} Replies
45+
</button>
46+
</div>
47+
</div>
48+
<div class="xl:hidden flex-shrink-0 flex justify-center items-center overflow-hidden">
49+
<img :src="emotion.leftImage" class="bg-transparent w-24 h-24 -mb-1 mt-2" />
4650
</div>
4751
</div>
4852
</div>
49-
<div class="flex-shrink-0 flex justify-center items-center overflow-hidden">
53+
<!-- Desktop reaction face -->
54+
<div class="hidden xl:block flex-shrink-0 flex justify-center items-center overflow-hidden">
5055
<img :src="emotion.leftImage" class="bg-transparent w-32 h-32 -mb-1 mt-2" />
5156
</div>
5257
</div>

‎src/components/post/Editor.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<div
4949
id="editor"
5050
ref="editor"
51-
class="max-w-none focus:outline-none p-2 content"
51+
class="max-w-none editable prose focus:outline-none p-2 content"
5252
v-html="$store.state.draft.drafts[$store.state.draft.activeIndex].content"
5353
></div>
5454

0 commit comments

Comments
 (0)