basic tailwind UI #101

koray-eren · 2022-04-14T04:52:46Z

room directory UI
message UI formatting (excl. timestamps + link previews)
light mode/dark mode switch
pop up QR code/link modal

…to dev

sogs/templates/base.html

majestrate · 2022-04-14T05:02:59Z

uwsgi-sogs.ini

@@ -0,0 +1,33 @@
+# uwsgi configuration for listening directly on port 80; this is the simplest setup, but is less


stray config file checked in

you mean that this file shouldn't be commited right?

sogs/utils.py

sogs/templates/view_room.html

sogs/routes/views.py

sogs/static/main.css

sogs/static/view_room.js

sogs/templates/base.html

Bilb · 2022-04-14T05:07:30Z

sogs/templates/base.html

+      <div class="flex space-x-4 ">
+        {% block invite %}
+        {% endblock %}
+        <button id="moonIcon" class='px-1 rounded' onclick="toggleDarkMode()"><img src="{{ url_for('static', filename='moon-d-50-min.png') }}" alt="moon"></button>


can you use svg instead

no SVGs please.

why not?
Is still related to security risks that svgs can run JS code? If yes, better not use JS at all, right? If a user can change the svg file to include malicious JS code, surely he can change the JS code itself to make it malicious, right?

Bilb · 2022-04-14T05:08:24Z

sogs/static/output.css

+/*
+! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
+*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}html{font-family:Roboto,system-ui,sans-serif}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.top-1\/2{top:50%}.m-5{margin:1.25rem}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.aspect-square{aspect-ratio:1/1}.h-full{height:100%}.h-32{height:8rem}.h-24{height:6rem}.h-screen{height:100vh}.h-28{height:7rem}.h-16{height:4rem}.max-h-32{max-height:8rem}.w-fit{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-screen{width:100vw}.w-5\/6{width:83.333333%}.w-\[93vw\]{width:93vw}.max-w-2xl{max-width:42rem}.flex-none{flex:none}.shrink{flex-shrink:1}.translate-x-\[-50\%\]{--tw-translate-x:-50%}.translate-x-\[-50\%\],.translate-y-\[-50\%\]{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-\[-50\%\]{--tw-translate-y:-50%}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-items-center{justify-items:center}.gap-y-2{row-gap:.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-normal{white-space:normal}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-l-2{border-left-width:2px}.border-b-2{border-bottom-width:2px}.border-sessionGreen{--tw-border-opacity:1;border-color:rgb(0 233 123/var(--tw-border-opacity))}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0/var(--tw-border-opacity))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-sessionGreen{--tw-bg-opacity:1;background-color:rgb(0 233 123/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-lightGray{--tw-bg-opacity:1;background-color:rgb(88 88 88/var(--tw-bg-opacity))}.bg-opacity-80{--tw-bg-opacity:0.8}.p-2{padding:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.text-center{text-align:center}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:.875rem;line-height:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.italic{font-style:italic}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-sessionGreen{--tw-text-opacity:1;color:rgb(0 233 123/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.decoration-black{-webkit-text-decoration-color:#000;text-decoration-color:#000}.decoration-2{text-decoration-thickness:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:border-lightGray{--tw-border-opacity:1;border-color:rgb(88 88 88/var(--tw-border-opacity))}.dark .dark\:border-sessionGreen{--tw-border-opacity:1;border-color:rgb(0 233 123/var(--tw-border-opacity))}.dark .dark\:bg-lightGray{--tw-bg-opacity:1;background-color:rgb(88 88 88/var(--tw-bg-opacity))}.dark .dark\:bg-otherGray{--tw-bg-opacity:1;background-color:rgb(39 39 38/var(--tw-bg-opacity))}.dark .dark\:bg-sessionGreen{--tw-bg-opacity:1;background-color:rgb(0 233 123/var(--tw-bg-opacity))}.dark .dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.dark .dark\:text-sessionGreen{--tw-text-opacity:1;color:rgb(0 233 123/var(--tw-text-opacity))}.dark .dark\:text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.dark .dark\:decoration-white{-webkit-text-decoration-color:#fff;text-decoration-color:#fff}.dark .dark\:hover\:bg-sessionGreen:hover{--tw-bg-opacity:1;background-color:rgb(0 233 123/var(--tw-bg-opacity))}.dark .dark\:hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}@media (min-width:365px){.xs\:text-4xl{font-size:2.25rem;line-height:2.5rem}.xs\:text-xl{font-size:1.25rem;line-height:1.75rem}.xs\:text-3xl{font-size:1.875rem;line-height:2.25rem}.xs\:text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:640px){.sm\:h-20{height:5rem}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:justify-between{justify-content:space-between}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:pl-0{padding-left:0}.sm\:pt-2{padding-top:.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width:768px){.md\:h-28{height:7rem}}@media (min-width:1024px){.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1536px){.\32xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}


I think this file is generated right?
If yes, it should be removed from the git and added to .gitignore. It's not supposed to be there if it's generated

sogs/static/view_room.js

Bilb · 2022-04-14T05:08:58Z

sogs/static/view_room.js

                        throw Error(err);
                    }
-
+                    


would be good to setup prettier to avoid those changesw

Bilb · 2022-04-14T05:10:06Z

uwsgi-sogs.ini

@@ -0,0 +1,33 @@
+# uwsgi configuration for listening directly on port 80; this is the simplest setup, but is less


you mean that this file shouldn't be commited right?

Bilb · 2022-04-14T05:12:04Z

sogs/templates/base.html

+              <p class=" font-bold text-sessionGreen dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Session Open&nbsp</p>
+              <p class=" font-bold text-sessionGreen dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Group Server</p>


maybe don't name this sessionGreen as we want to not stay to close to Session
maybe just accent?

Bilb · 2022-04-14T05:15:39Z

sogs/templates/base.html

+      function setPageTheme(){
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          htmlElement.classList.add('dark')
+          sunIcon.style.display = 'block'
+          moonIcon.style.display = 'none'
+        } else {
+          htmlElement.classList.remove('dark')
+          sunIcon.style.display = 'none'
+          moonIcon.style.display = 'block'
+        }
+      }
+
+      function toggleDarkMode(){
+        if ('theme' in localStorage && localStorage.theme === 'light') {
+          localStorage.theme = 'dark'
+          setPageTheme();
+        } else {
+          localStorage.theme = 'light'
+          setPageTheme();
+        }
+      }


default theme is light

first click switch to light again
second click switch to dark

you can test this in an incognito window
easy fix would be I think

if (!localStorage.theme || localStorage.theme === 'light') {

yeah i was unsure on this - did it this way as a quick fix to avoid flash of light mode when set to dark theme - i thought its better to default to dark than to have light mode flash every time for a dark mode user - ill look into it some more and change

Bilb · 2022-04-14T05:16:34Z

sogs/routes/views.py

+from ..utils import message_body, decode_base64, message_contents
 from .. import config, crypto, http
 from ..model.room import get_accessible_rooms
+from ..model.user import User
+from .messages import message_single, messages_recent
 from . import auth, converters  # noqa: F401
+from .. import session_pb2 as protobuf
+import time



are all of those changes needed?

sogs/static/view_room.js

Bilb · 2022-04-14T05:19:57Z

tailwind.config.js

+      colors: {
+        sessionGreen: '#00e97b',
+        lightGray: '#585858',
+        otherGray: '#272726'


…to dev

majestrate · 2022-04-14T17:30:50Z

i rebased this ontop of dev and ran the linter in #102

koray-eren and others added 30 commits March 22, 2022 03:59

basic tailwind + css setup

abed379

Merge branch 'dev' of https://github.com/koray-eren/session-pysogs in…

9dcc298

…to dev

removed node modules

49b4b20

removed yarn lock, package lock

9384c7b

added room buttons to index with basic styling

2f6c3e6

added touch-reload for base

dfd3447

room dir pill design largely complete

358fa51

persistant dark mode prefs

dc684cf

minor refactor

ba5e7a7

minor refactor

cf6b94a

rejigged mobile sizing and breakpoints

31792fe

dark mode icons

57ecf0c

updated qr code and link styles

b5d3612

Merge branch 'oxen-io:dev' into dev

65fa32f

basic styling around messages

35f2579

basic message container

2d7f945

reply message formatting

2f1f972

Merge branch 'oxen-io:dev' into dev

2b94ac7

Merge branch 'oxen-io:dev' into dev

c80c986

add invite link/qr to nav

a5f900b

Merge branch 'dev' of https://github.com/koray-eren/session-pysogs in…

d33ab39

…to dev

rejigged styling, header, qr code

a4e0d59

fixed mobile viewport issue

2823f0b

change light mode header

ce3bbf5

changed header styles in mobile view

61b49ca

install tailwind

c580982

tailwind install

0a54e2c

format messages with attachments

9858f65

cleanup comments and debugs prints

41be130

Merge branch 'oxen-io:dev' into dev

dcdb086