Skip to content

Commit a1fd40b

Browse files
koray-erenJeff
koray-eren
authored and
Jeff
committed
rejigged styling, header, qr code
1 parent e07f4a0 commit a1fd40b

File tree

3 files changed

+41
-43
lines changed

3 files changed

+41
-43
lines changed

‎sogs/templates/base.html‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<html id="html" class="">
1+
<html id="html" class="dark">
22
<head>
33

44
<title> sogs </title>
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
77
<script src="https://cdn.tailwindcss.com"></script>
8-
8+
99
<script>
1010
tailwind.config = {
1111
darkMode: 'class',
@@ -28,34 +28,36 @@
2828
}
2929
}
3030
</script>
31+
3132
</head>
32-
<body class="dark:bg-otherGray transition duration-500">
33+
<body class="dark:bg-otherGray transition duration-500 max-h-screen flex flex-col">
3334

3435
{% block modal %}
3536
{% endblock %}
3637

3738
<!-- header / navbar -->
38-
<div class="px-2 sm:px-5 flex justify-between items-center w-full max-h-32
39-
bg-sessionGreen dark:bg-otherGray border-b-8 border-black dark:border-sessionGreen transition duration-500">
39+
<div class="px-2 sm:px-5 flex-none flex justify-between items-center w-full h-32 max-h-32
40+
bg-sessionGreen dark:bg-otherGray border-b-2 border-black dark:border-lightGray transition duration-500">
4041
<div class="text-black dark:text-white text-center">
41-
<h1 class="text-3xl xs:text-4xl sm:text-5xl">{% block heading %}{% endblock %}</h1>
42-
<p class="text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
42+
<button>
43+
<a href="/">
44+
<h1 class="text-3xl xs:text-4xl sm:text-5xl underline decoration-black dark:decoration-sessionGreen decoration-2">{% block heading %}{% endblock %}</h1>
45+
<p class="text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
46+
</a>
47+
</button>
4348
</div>
4449

4550
<div class="flex space-x-4 ">
4651
{% block invite %}
4752
{% endblock %}
4853
<button id="moonIcon" class='px-1 rounded' onclick="toggleDarkMode()"><img src="{{ url_for('static', filename='moon-d-50-min.png') }}" alt="moon"></button>
4954
<button id="sunIcon" style="display: none;" class='px-1 rounded' onclick="toggleDarkMode()"><img src="{{ url_for('static', filename='sun-w-50-min.png') }}" alt="sun"></button>
50-
5155
</div>
5256
</div>
5357

5458
<!-- content/body -->
55-
<section class="text-black dark:text-white m-5">
56-
{% block body %}
57-
{% endblock %}
58-
</section>
59+
{% block body %}
60+
{% endblock %}
5961
</body>
6062
<!-- dark mode toggle js -->
6163
<script>
@@ -74,7 +76,7 @@ <h1 class="text-3xl xs:text-4xl sm:text-5xl">{% block heading %}{% endblock %}</
7476
moonIcon.style.display = 'block'
7577
}
7678
}
77-
79+
7880
function toggleDarkMode(){
7981
if ('theme' in localStorage && localStorage.theme === 'light') {
8082
localStorage.theme = 'dark'
@@ -91,7 +93,6 @@ <h1 class="text-3xl xs:text-4xl sm:text-5xl">{% block heading %}{% endblock %}</
9193
}
9294

9395
function handleCloseModalClick() {
94-
console.log("CLICKED CLICKED CLICKED CLICKED CLICKED CLICKED CLICKED")
9596
modal.style.display = 'none';
9697
}
9798

‎sogs/templates/index.html‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,21 @@
66

77
{% block body %}
88

9-
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-y-2 gap-x-2">
10-
{% for room in rooms %}
11-
{% for i in range(8) %}
12-
<a class="px-5 flex flex-col justify-center items-center transition duration-500 text-center w-full h-24
13-
border-8 border-black bg-sessionGreen hover:bg-black hover:text-white md:h-28
14-
dark:border-sessionGreen rounded-full dark:bg-black dark:hover:bg-sessionGreen dark:hover:text-black " href="/r/{{room.token}}">
15-
<p class="text-2xl xs:text-3xl sm:text-4xl">{{room.token }}</p>
16-
<p class="text-sm xs:text-lg sm:text-xl">{{room.active_users() }} Active User{{'s' if room.active_users() > 1}}</p>
17-
</a>
18-
{% endfor %}
19-
{% endfor %}
20-
</div>
9+
<section class="overflow-y-auto text-black dark:text-white ">
10+
<div class="m-5 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-y-2 gap-x-2">
11+
{% for room in rooms %}
12+
{% for i in range(8) %}
13+
<a class="px-5 flex flex-col justify-center items-center transition duration-500 text-center w-full h-24
14+
border-2 border-black bg-sessionGreen hover:bg-black hover:text-white md:h-28
15+
dark:border-sessionGreen rounded-full dark:bg-otherGray dark:hover:bg-sessionGreen dark:hover:text-black " href="/r/{{room.token}}">
16+
<p class="text-2xl xs:text-3xl sm:text-4xl">{{room.token }}</p>
17+
<p class="text-sm xs:text-lg sm:text-xl">{{room.active_users }} Active User{{'s' if room.active_users > 1}}</p>
18+
</a>
19+
{% endfor %}
20+
{% endfor %}
21+
</div>
22+
</section>
23+
24+
2125

2226
{% endblock %}

‎sogs/templates/view_room.html‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
</script>
1313

1414
{% block modal %}
15-
<div id="modal" class="bg-green dark:bg-transparent w-screen h-screen">
16-
<div style="display: none;" class="flex flex-col justify-center absolute bg-lightGray rounded-lg w-5/6 max-w-2xl aspect-square left-1/2 translate-x-[-50%] top-1/2 translate-y-[-50%]">
15+
<div id="modal" style="display: none;" class="bg-black bg-opacity-80 w-screen h-screen absolute">
16+
<div onclick="handleCloseModalClick()" class="flex flex-col justify-center absolute bg-lightGray rounded-lg w-5/6 max-w-2xl aspect-square left-1/2 translate-x-[-50%] top-1/2 translate-y-[-50%] ">
1717
<div class="flex w-full justify-between ">
18-
<pre class="dark:text-white break-all whitespace-normal m-2">{{room.url}}</pre>
19-
<button onclick="handleCloseModalClick()" class="text-white bold text-center rounded px-1 m-2 "> X</button>
18+
<pre class="text-white break-all whitespace-normal m-2">{{room.url}}</pre>
19+
<button onclick="handleCloseModalClick()" class="text-white bold text-center rounded px-1 m-2 font-sans"> X</button>
2020
</div>
2121
<img class="aspect-square p-2" src="invite.png" />
2222
</div>
@@ -41,20 +41,11 @@
4141

4242

4343
{% block body %}
44-
<div class="flex justify-center align-center space-x-3">
45-
<div class="w-2/3 md:w-5/6">
46-
<button class="bg-black text-white dark:bg-sessionGreen dark:text-black rounded px-1 py-1 my-2" > <a href="/">< Back</a></button>
47-
<pre class="text-sm break-all whitespace-normal">{{room.url}}</pre>
48-
<pre class="text-sm break-all whitespace-normal">{{test}}</pre>
49-
</div>
50-
<div class="w-1/3 lg:w-auto ">
51-
<img class="aspect-square max-w-full max-h-40 " src="invite.png" />
52-
</div>
53-
</div>
44+
<!-- <button class="bg-black text-white dark:bg-sessionGreen dark:text-black rounded px-1 py-1 my-2" > <a href="/">< Back</a></button> -->
5445

55-
<div class="flex">
46+
<section class="overflow-y-auto text-black dark:text-white flex flex-col-reverse ">
5647
{% if show_recent %}
57-
<div id="messages-container" class=" overflow-y-auto border-2 rounded border-sessionGreen h-96 flex flex-col-reverse my-5 w-full" >
48+
<div id="messages-container" class="m-5 flex flex-col-reverse " >
5849
<ul id="messages" class="m-2">
5950
<li>loading...</li>
6051
</ul>
@@ -66,7 +57,9 @@
6657
<script src="/static/protobuf.min.js"></script>
6758
<script src="/static/view_room.js"></script>
6859
{%endif%}
69-
</div>
60+
</section>
61+
62+
7063

7164

7265
{% endblock %}

0 commit comments

Comments
 (0)