From 301e3932b64172b3f9cf055287fdfdb4a89620af Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Wed, 24 Feb 2021 18:56:32 +0200
Subject: Improved semantics and simplified some HTML of comments and posts

---
 .../components/post-attachment/post-attachment.component.css  | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

(limited to 'src/app/components/post-attachment/post-attachment.component.css')

diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 572cc99..58e8a82 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,6 +1,9 @@
 /* Attachment */
 
 .attachment {
+  width: 100%;
+  height: 100%;
+  display: flex;
   border: 2px solid black;
   border-top: 0;
   border-radius: 0 0 .6em .6em;
@@ -9,13 +12,7 @@
   margin-top: calc(-0.8em - 2px);
 }
 
-.clickable {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.clickable:hover {
+.attachment:hover {
   cursor: pointer;
 }
 
-- 
cgit v1.2.3


From 9794489573eaa3cd8bdc853c9d67db5145e22fe4 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 20 Mar 2021 11:10:58 +0200
Subject: Major rework of post attachment styling

---
 .../post-attachment/post-attachment.component.css  | 50 +------------
 .../post-attachment/post-attachment.component.html | 20 +++---
 src/app/components/post/post.component.css         |  1 -
 src/app/components/post/post.component.html        |  2 +-
 src/assets/icons/tabler-icon-file.svg              | 69 ++++++++++++++++++
 src/assets/icons/tabler-icon-photo.svg             | 84 ++++++++++++++++++++++
 src/styles.css                                     | 15 ++++
 7 files changed, 181 insertions(+), 60 deletions(-)
 create mode 100644 src/assets/icons/tabler-icon-file.svg
 create mode 100644 src/assets/icons/tabler-icon-photo.svg

(limited to 'src/app/components/post-attachment/post-attachment.component.css')

diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 58e8a82..dd41340 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,27 +1,5 @@
-/* Attachment */
-
 .attachment {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  border: 2px solid black;
-  border-top: 0;
-  border-radius: 0 0 .6em .6em;
-  padding: .4em;
-  padding-top: 1em;
-  margin-top: calc(-0.8em - 2px);
-}
-
-.attachment:hover {
-  cursor: pointer;
-}
-
-.attachment-name {
-  flex: 1;
-}
-
-.attachment-type {
-  margin-left: .2em;
+  background-color: #424242;
 }
 
 /* Full attachment */
@@ -33,9 +11,6 @@
   width: 100vw;
   height: 100vh;
   background-color: #000000AF;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 2;
 }
 
@@ -46,27 +21,6 @@
 
 .attachment-download {
   max-width: 420px !important;
-  margin: 0 .4em;
   text-decoration: none;
-  color: white;
-  border-color: white;
-  background-color: black;
-}
-
-.attachment-download:hover {
-  background-color: white;
-  color: var(--focus-color);
-}
-
-.close {
-  position: fixed;
-  top: .2em;
-  right: .2em;
-  font-size: 2em;
-  color: whitesmoke;
-}
-
-.close:hover {
-  color: var(--failure);
-  cursor: pointer;
+  color: inherit;
 }
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 401068c..8605ca0 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,16 +1,16 @@
-<figure class="attachment" (click)="toggleShowFull()">
-	<summary class="attachment-name">
+<figure class="attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
+	<div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType">
+		<img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg">
+		<img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg">
+	</div>
+	<summary class="flex-col flex-justify-center">
 		{{ fileName }}
 	</summary>
-	<summary class="attachment-type">
-		{{ fileType }}
-	</summary>
 </figure>
 
-<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()">
+<div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()">
 	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
-	<a class="attachment-download submit-btn" *ngIf="!isImage" href="{{paramURL}}">Download attachment</a>
-	<div class="close">
-		☒
-	</div>
+	<a class="attachment-download faded-slim-border padding-normal lighter-hover click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}">
+		Download attachment
+	</a>
 </div>
diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index f263386..c5919fd 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -16,7 +16,6 @@
 }
 
 .message {
-  margin: 0.2em 0;
   word-break: break-word;
 }
 
diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html
index a966d00..133b747 100644
--- a/src/app/components/post/post.component.html
+++ b/src/app/components/post/post.component.html
@@ -13,7 +13,7 @@
 				@{{ user.userName }}
 			</span>
 		</summary>
-		<article class="message">
+		<article class="message margin-top-bot-small">
 			{{ post.message }}
 		</article>
 		<section class="flex-row flexible-children">
diff --git a/src/assets/icons/tabler-icon-file.svg b/src/assets/icons/tabler-icon-file.svg
new file mode 100644
index 0000000..312c9f4
--- /dev/null
+++ b/src/assets/icons/tabler-icon-file.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-file"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-file.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="m 14,3 v 4 a 1,1 0 0 0 1,1 h 4"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 17,21 H 7 A 2,2 0 0 1 5,19 V 5 A 2,2 0 0 1 7,3 h 7 l 5,5 v 11 a 2,2 0 0 1 -2,2 z"
+     id="path6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-photo.svg b/src/assets/icons/tabler-icon-photo.svg
new file mode 100644
index 0000000..eddf3cc
--- /dev/null
+++ b/src/assets/icons/tabler-icon-photo.svg
@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-photo"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg12"
+   sodipodi:docname="tabler-icon-photo.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata18">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs16" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     id="namedview14"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="15"
+     y1="8"
+     x2="15.01"
+     y2="8"
+     id="line4"
+     style="stroke:#ffeede" />
+  <rect
+     x="4"
+     y="4"
+     width="16"
+     height="16"
+     rx="3"
+     id="rect6"
+     style="stroke:#ffeede" />
+  <path
+     d="m 4,15 4,-4 a 3,5 0 0 1 3,0 l 5,5"
+     id="path8"
+     style="stroke:#ffeede" />
+  <path
+     d="m 14,14 1,-1 a 3,5 0 0 1 3,0 l 2,2"
+     id="path10"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 0a435a7..c06a9bd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -122,6 +122,10 @@ input[type=file]::file-selector-button {
   flex-wrap: wrap;
 }
 
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -246,6 +250,17 @@ input[type=file]::file-selector-button {
   padding-bottom: 0.2em;
 }
 
+/* Margin */
+
+.margin-top-bot-small {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+.margin-right-small {
+  margin-right: 0.2em;
+}
+
 /* Cards */
 
 .card {
-- 
cgit v1.2.3


From 05498013ab02d44ea1e6906c2f64ae63eeaea93a Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sat, 20 Mar 2021 11:25:26 +0200
Subject: Improved styling of download button in post attachment

---
 src/app/components/post-attachment/post-attachment.component.css  | 1 +
 src/app/components/post-attachment/post-attachment.component.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/app/components/post-attachment/post-attachment.component.css')

diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index dd41340..3c25563 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -21,6 +21,7 @@
 
 .attachment-download {
   max-width: 420px !important;
+  background-color: var(--card-bg);
   text-decoration: none;
   color: inherit;
 }
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 8605ca0..12004dc 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -10,7 +10,7 @@
 
 <div class="show-full-attachment flex-row flex-justify-center flex-center-align-items" *ngIf="showFull" (click)="toggleShowFull()">
 	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
-	<a class="attachment-download faded-slim-border padding-normal lighter-hover click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}">
+	<a class="attachment-download faded-slim-border padding-normal hover-half-opacity click-effect border-radius-smaller" *ngIf="!isImage" href="{{paramURL}}">
 		Download attachment
 	</a>
 </div>
-- 
cgit v1.2.3


From 88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Sun, 21 Mar 2021 15:14:54 +0200
Subject: Major redesign of form attachments (the ones you find on post
 creation and edit)

---
 src/app/components/feed/feed.component.css         | 12 ++--
 src/app/components/feed/feed.component.html        | 14 ++--
 .../post-attachment/post-attachment.component.css  |  4 --
 .../post-attachment/post-attachment.component.html |  2 +-
 src/assets/icons/tabler-icon-x.svg                 | 75 ++++++++++++++++++++++
 src/styles.css                                     | 27 ++++----
 6 files changed, 101 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/icons/tabler-icon-x.svg

(limited to 'src/app/components/post-attachment/post-attachment.component.css')

diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css
index 372792c..a0b6d2e 100644
--- a/src/app/components/feed/feed.component.css
+++ b/src/app/components/feed/feed.component.css
@@ -1,3 +1,7 @@
+section:empty {
+  display: none;
+}
+
 #create-post {
   width: 100%;
   margin-top: 1em;
@@ -8,19 +12,11 @@
   resize: vertical;
 }
 
-#attachments-btns {
-  padding: 0.5em 0;
-}
-
 #attachments-btns img, .file-button > input {
   height: 1.4em;
   width: 1.4em;
 }
 
-#new-post-attachments {
-  margin-bottom: 0.5em;
-}
-
 .file-button {
   position: relative;
 }
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html
index fb969da..3fd778a 100644
--- a/src/app/components/feed/feed.component.html
+++ b/src/app/components/feed/feed.component.html
@@ -5,17 +5,19 @@
 <main class="centered-content scroll-standalone under-navbar flex-col flex-justify-start" *ngIf="dataArrived">
 	<form id="create-post" class="card flex-col" [formGroup]="createPostFormGroup" (ngSubmit)="createPost()">
 		<textarea id="new-post-message" class="faded-slim-border border-bottom-only padding-small" rows="1" formControlName="newPostMessage" placeholder="What's on your mind?"></textarea>
-		<section id="attachments-btns" class="flex-row flex-justify-start flex-center-align-children">
+		<section class="flex-row flex-justify-start flex-center-align-children top-bot-padding-bigger">
 			<div class="file-button hover-half-opacity click-effect">
 				<img src="/assets/icons/tabler-icon-paperclip.svg">
 				<input type="file" formControlName="fileUpload" (change)="onFileUpload($event)" multiple>
 			</div>
 		</section>
-		<section id="new-post-attachments" class="flex-row faded-slim-border border-bottom-only">
-			<div *ngFor="let file of files" class="form-attachment">
-				{{ file.name ? file.name : 'Attachment' }}
-				<div class="remove-form-attachment" (click)="removeAttachment(file.name)">
-					☒
+		<section class="flex-row bot-padding-bigger">
+			<div *ngFor="let file of files" class="form-attachment faded-slim-border flexible flex-row flex-no-wrap flex-center-align-items padding-small margin-top-bot-small">
+				<div class="flexible">
+					{{ file.name ? file.name : 'Attachment' }}
+				</div>
+				<div class="flex-col hover-half-opacity border-radius-small click-effect" (click)="removeAttachment(file.name)">
+					<img src="/assets/icons/tabler-icon-x.svg">
 				</div>
 			</div>
 		</section>
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
index 3c25563..6cdab0b 100644
--- a/src/app/components/post-attachment/post-attachment.component.css
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -1,7 +1,3 @@
-.attachment {
-  background-color: #424242;
-}
-
 /* Full attachment */
 
 .show-full-attachment {
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
index 12004dc..04ba633 100644
--- a/src/app/components/post-attachment/post-attachment.component.html
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -1,4 +1,4 @@
-<figure class="attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
+<figure class="form-attachment faded-slim-border flexible flex-row flex-no-wrap padding-small hover-half-opacity margin-top-bot-small" (click)="toggleShowFull()">
 	<div class="flex-col flex-justify-center margin-right-small" [ngSwitch]="fileType">
 		<img *ngSwitchCase="'img'" src="/assets/icons/tabler-icon-photo.svg">
 		<img *ngSwitchDefault src="/assets/icons/tabler-icon-file.svg">
diff --git a/src/assets/icons/tabler-icon-x.svg b/src/assets/icons/tabler-icon-x.svg
new file mode 100644
index 0000000..28725c8
--- /dev/null
+++ b/src/assets/icons/tabler-icon-x.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon icon-tabler icon-tabler-x"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="tabler-icon-x.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="737"
+     inkscape:window-height="480"
+     id="namedview10"
+     showgrid="false"
+     inkscape:zoom="37.541667"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg8" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <line
+     x1="18"
+     y1="6"
+     x2="6"
+     y2="18"
+     id="line4"
+     style="stroke:#ffeede" />
+  <line
+     x1="6"
+     y1="6"
+     x2="18"
+     y2="18"
+     id="line6"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 93ed57b..b166d70 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -277,6 +277,15 @@ input[type=file]::file-selector-button {
   padding-left: 0.3em;
 }
 
+.bot-padding-bigger {
+  padding-bottom: 0.5em;
+}
+
+.top-bot-padding-bigger {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
+
 .top-bot-padding-small {
   padding-top: 0.2em;
   padding-bottom: 0.2em;
@@ -446,6 +455,10 @@ input[type=file]::file-selector-button {
 
 /* Form attachments (the ones that are shown while creating and editing a post) */
 
+.form-attachment {
+  background-color: #424242;
+}
+
 .form-attachments {
   display: flex;
   flex-wrap: wrap;
@@ -454,20 +467,6 @@ input[type=file]::file-selector-button {
   margin: 0 0.3em;
 }
 
-.form-attachment {
-  border: 2px solid black;
-  border-radius: 0.6em;
-  margin-top: 0.2em;
-  margin-right: 0.2em;
-  padding: 0.2em;
-  display: flex;
-  align-items: center;
-}
-
-.form-attachment:last-child {
-  margin-right: 0;
-}
-
 .remove-form-attachment {
   font-size: 0.9em;
   color: var(--failure);
-- 
cgit v1.2.3