aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/components/post-attachment/post-attachment.component.css50
-rw-r--r--src/app/components/post-attachment/post-attachment.component.html20
-rw-r--r--src/app/components/post/post.component.css1
-rw-r--r--src/app/components/post/post.component.html2
-rw-r--r--src/assets/icons/tabler-icon-file.svg69
-rw-r--r--src/assets/icons/tabler-icon-photo.svg84
-rw-r--r--src/styles.css15
7 files changed, 181 insertions, 60 deletions
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 {
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 17:16:01 +0000