Skip to content

Commit 974a722

Browse files
civilcoder55civilcoder55
committed
ui improvments
1 parent b916ad9 commit 974a722

File tree

5 files changed

+99
-90
lines changed

5 files changed

+99
-90
lines changed

‎src/static/css/main-light.css‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ ul {
162162
height: 40px;
163163
border-radius: 6px;
164164
background-color: #666ee8;
165+
margin-right: 40px;
165166
}
166167
.header__login svg {
167168
stroke: #ececec;
@@ -197,8 +198,9 @@ ul {
197198
stroke: #222831;
198199
}
199200
.header__logo {
200-
margin-left: auto;
201-
margin-right: 42px;
201+
/* margin-left: auto;
202+
margin-right: 42px; */
203+
margin: 0;
202204
}
203205
.header__menu {
204206
position: absolute;
@@ -264,6 +266,7 @@ ul {
264266
color: #222831;
265267
margin-bottom: 20px;
266268
letter-spacing: 0.4px;
269+
margin-right: 30px;
267270
}
268271
.header__nav a:last-child {
269272
margin-bottom: 0;
@@ -286,12 +289,19 @@ ul {
286289
}
287290
}
288291
@media (min-width: 1200px) {
292+
.header__login {
293+
margin-right: 0;
294+
}
295+
.header__color {
296+
margin-right: 30px;
297+
}
289298
.header__menu {
290299
display: none;
291300
}
292301
.header__logo {
293-
margin-right: 0;
294-
margin-left: 100px;
302+
/* margin-right: 0;
303+
margin-left: 100px; */
304+
margin: 0;
295305
}
296306
.header__nav {
297307
transform: translateX(0);
@@ -301,15 +311,16 @@ ul {
301311
right: auto;
302312
width: auto;
303313
border: none;
304-
flex-direction: row-reverse;
314+
flex-direction: row;
305315
justify-content: flex-end;
306316
align-items: center;
307317
padding: 0;
308-
margin-left: auto;
318+
/* margin-left: auto; */
319+
margin-right: auto;
309320
}
310321
.header__nav a {
311322
margin-bottom: 0;
312-
margin-left: 60px;
323+
/* margin-left: 60px; */
313324
}
314325
}
315326
.section {

‎src/static/css/main.css‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,7 @@ ul {
169169
height: 40px;
170170
border-radius: 6px;
171171
background-color: #666ee8;
172+
margin-right: 40px;
172173
}
173174
.header__login svg {
174175
stroke: #ececec;
@@ -204,8 +205,9 @@ ul {
204205
stroke: #fff;
205206
}
206207
.header__logo {
207-
margin-left: auto;
208-
margin-right: 42px;
208+
/* margin-left: auto;
209+
margin-right: 42px; */
210+
margin: 0;
209211
}
210212
.header__menu {
211213
position: absolute;
@@ -271,6 +273,7 @@ ul {
271273
color: #fff;
272274
margin-bottom: 20px;
273275
letter-spacing: 0.4px;
276+
margin-right: 30px;
274277
}
275278
.header__nav a:last-child {
276279
margin-bottom: 0;
@@ -293,12 +296,19 @@ ul {
293296
}
294297
}
295298
@media (min-width: 1200px) {
299+
.header__login {
300+
margin-right: 0;
301+
}
302+
.header__color {
303+
margin-right: 30px;
304+
}
296305
.header__menu {
297306
display: none;
298307
}
299308
.header__logo {
300-
margin-right: 0;
301-
margin-left: 100px;
309+
/* margin-right: 0;
310+
margin-left: 100px; */
311+
margin: 0;
302312
}
303313
.header__nav {
304314
transform: translateX(0);
@@ -308,15 +318,16 @@ ul {
308318
right: auto;
309319
width: auto;
310320
border: none;
311-
flex-direction: row-reverse;
321+
flex-direction: row;
312322
justify-content: flex-end;
313323
align-items: center;
314324
padding: 0;
315-
margin-left: auto;
325+
/* margin-left: auto; */
326+
margin-right: auto;
316327
}
317328
.header__nav a {
318329
margin-bottom: 0;
319-
margin-left: 60px;
330+
/* margin-left: 60px; */
320331
}
321332
}
322333
.section {

‎src/static/js/main.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ $(document).ready(function () {
113113
return "";
114114
}
115115

116-
function swapMode() {
116+
function switchMode() {
117117
const mode = getCookie("mode");
118118
if (mode == "normal") {
119119
document.cookie = "mode=;path=/;expires=Fri Dec 31 9999 14:00:00 GMT+0200;";
@@ -137,6 +137,26 @@ $(document).ready(function () {
137137
document.getElementById("mode").setAttribute("href", lightModeCss);
138138
}
139139

140-
const swapButton = document.getElementById("swap");
141-
if (swapButton) swapButton.onclick = swapMode;
140+
const switchButton = document.getElementById("switch");
141+
if (switchButton) switchButton.onclick = switchMode;
142+
143+
/*==============================
144+
Posts
145+
==============================*/
146+
function isUnicode(str) {
147+
var letters = [];
148+
for (var i = 0; i <= str.length; i++) {
149+
letters[i] = str.substring(i - 1, i);
150+
if (letters[i].charCodeAt() > 255) {
151+
return true;
152+
}
153+
}
154+
return false;
155+
}
156+
157+
document.querySelectorAll(".description-block").forEach((e) => {
158+
if (isUnicode(e.innerText)) {
159+
e.style.direction = "rtl";
160+
}
161+
});
142162
});

‎src/templates/layout/base.html‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="icon"
1212
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📦</text></svg>">
1313

14-
<meta name="description" content="" />
14+
<meta name="description" content="BlogPost & Twitter Bot" />
1515
<meta name="keywords" content="" />
1616
<title>{{title}} | TheCollector</title>
1717
</head>
@@ -22,30 +22,10 @@
2222
<div class="row">
2323
<div class="col-12">
2424
<div class="header__content">
25-
{% if user.is_authenticated %}
26-
<a href="{% url 'logout' %}" class="header__login"><svg xmlns="http://www.w3.org/2000/svg" width="512"
27-
height="512" viewBox="0 0 512 512">
28-
<path
29-
d="M176,176V136a40,40,0,0,1,40-40H424a40,40,0,0,1,40,40V376a40,40,0,0,1-40,40H216a40,40,0,0,1-40-40V336"
30-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
31-
<polyline points="272 336 352 256 272 176"
32-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
33-
<line x1="48" y1="256" x2="336" y2="256"
34-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
35-
</svg><span>Logout</span></a>
36-
{% else %}
37-
<a href="{% url 'login' %}" class="header__login"><svg xmlns="http://www.w3.org/2000/svg" width="512"
38-
height="512" viewBox="0 0 512 512">
39-
<path
40-
d="M176,176V136a40,40,0,0,1,40-40H424a40,40,0,0,1,40,40V376a40,40,0,0,1-40,40H216a40,40,0,0,1-40-40V336"
41-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
42-
<polyline points="272 336 352 256 272 176"
43-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
44-
<line x1="48" y1="256" x2="336" y2="256"
45-
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
46-
</svg><span>Login</span></a>
47-
{% endif %}
48-
<button href="#" class="header__color" id="swap">
25+
<a href="{% url 'home' %}" class="header__logo">
26+
<img src="{% static 'img/logo.png' %}" alt="" />
27+
</a>
28+
<button href="#" class="header__color" id="switch" aria-label="switch-mode">
4929
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
5030
<line x1="256" y1="48" x2="256" y2="96"
5131
style="fill: none; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 32px" />
@@ -68,21 +48,39 @@
6848
</svg>
6949
</button>
7050
<nav class="header__nav">
71-
{% if user.is_authenticated %}
7251
<a href="{% url 'home' %}">Home</a>
52+
{% if user.is_authenticated %}
7353
<a href="{% url 'my_posts' %}">My Posts</a>
7454
<a href="{% url 'profile' %}">My profile</a>
75-
<a href="{% url 'about' %}">How to use</a>
7655
{% else %}
77-
<a href="{% url 'home' %}">Home</a>
7856
<a href="{% url 'register' %}">Register</a>
79-
<a href="{% url 'about' %}">How to use</a>
8057
{% endif %}
58+
<a href="{% url 'about' %}">How to use</a>
8159
</nav>
82-
<a href="{% url 'home' %}" class="header__logo">
83-
<img src="{% static 'img/logo.png' %}" alt="" />
84-
</a>
85-
<button class="header__menu" type="button">
60+
{% if user.is_authenticated %}
61+
<a href="{% url 'logout' %}" class="header__login"><svg xmlns="http://www.w3.org/2000/svg" width="512"
62+
height="512" viewBox="0 0 512 512">
63+
<path
64+
d="M176,176V136a40,40,0,0,1,40-40H424a40,40,0,0,1,40,40V376a40,40,0,0,1-40,40H216a40,40,0,0,1-40-40V336"
65+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
66+
<polyline points="272 336 352 256 272 176"
67+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
68+
<line x1="48" y1="256" x2="336" y2="256"
69+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
70+
</svg><span>Logout</span></a>
71+
{% else %}
72+
<a href="{% url 'login' %}" class="header__login"><svg xmlns="http://www.w3.org/2000/svg" width="512"
73+
height="512" viewBox="0 0 512 512">
74+
<path
75+
d="M176,176V136a40,40,0,0,1,40-40H424a40,40,0,0,1,40,40V376a40,40,0,0,1-40,40H216a40,40,0,0,1-40-40V336"
76+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
77+
<polyline points="272 336 352 256 272 176"
78+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
79+
<line x1="48" y1="256" x2="336" y2="256"
80+
style="fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px" />
81+
</svg><span>Login</span></a>
82+
{% endif %}
83+
<button class="header__menu" type="button" aria-label="header-menu">
8684
<span></span>
8785
<span></span>
8886
<span></span>
@@ -100,11 +98,10 @@
10098
<div class="row">
10199
<div class="col-12">
102100
<div class="footer__content">
103-
<small class="footer__copyright"></small>
104-
105101
<a href="#" class="footer__logo">
106102
<img src="{% static 'img/logo.png' %}" alt="" />
107103
</a>
104+
<small class="footer__copyright"></small>
108105
</div>
109106
</div>
110107
</div>
@@ -148,7 +145,7 @@
148145
};
149146

150147
socket.onmessage = function recieve(message) {
151-
148+
152149
const data = JSON.parse(message.data);
153150
const post = data.event
154151
console.log(post)

‎src/templates/posts/post.html‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
<img class="comments__avatar" src="{{post.author_photo}}" alt="" style="width: 88px;height:88px">
4343
<span class="comments__name"><a href="https://twitter.com/{{post.author_screen_name}}"
4444
target="_blank">{{post.author_name}}</a></span>
45-
<p class="comments__text desc">{{post.author_describtion}}</p></span></span>
45+
<p class="comments__text description-block">{{post.author_describtion}}</p></span></span>
4646
</div>
4747
</div>
4848
<div class="col-12" style="margin-top: 50px;">
@@ -246,7 +246,6 @@
246246
</div>
247247
</div>
248248
</div>
249-
250249
<div class="col-12">
251250
<ul class="comments">
252251
{% for comment in comments %}
@@ -256,14 +255,11 @@
256255
<span class="comments__name">{{comment.user.username}}</span>
257256
<span class="comments__time">{{comment.created_at}}</span>
258257
</div>
259-
260258
<p class="comments__text">{{comment.text}}</p>
261259
</li>
262-
263260
{% endfor %}
264261
</ul>
265262
</div>
266-
267263
<div class="col-12">
268264
<form method="POST" class="form form--comment" id="commentBox">
269265
{% csrf_token %}
@@ -299,13 +295,7 @@ <h2 class="section__title2">Similar news</h2>
299295
</div>
300296
</section>
301297

302-
{% endblock %} {% block script %} {% if not user.is_authenticated %}
303-
<script>
304-
$(document).ready(() => {
305-
$(".form__textarea").attr("disabled", "");
306-
});
307-
</script>
308-
{% endif %} {% if user.is_authenticated %}
298+
{% endblock %} {% block script %} {% if user.is_authenticated %}
309299
<script>
310300
function sendTaste(type) {
311301
$.ajax({
@@ -333,7 +323,12 @@ <h2 class="section__title2">Similar news</h2>
333323
</script>
334324
{% else %}
335325
<script>
326+
function alert() {
327+
Swal.fire("please login!", "You should be a user to comment!", "error");
328+
}
329+
336330
$(document).ready(function (e) {
331+
$(".form__textarea").attr("disabled", "");
337332
$("#like").click(function (e) {
338333
Swal.fire("please login!", "You should be a user to like!", "error");
339334
});
@@ -343,30 +338,5 @@ <h2 class="section__title2">Similar news</h2>
343338
});
344339
</script>
345340
{% endif %}
346-
<script>
347-
function alert() {
348-
Swal.fire("please login!", "You should be a user to comment!", "error");
349-
}
350-
function isUnicode(str) {
351-
var letters = [];
352-
for (var i = 0; i <= str.length; i++) {
353-
letters[i] = str.substring((i - 1), i);
354-
if (letters[i].charCodeAt() > 255) { return true; }
355-
}
356-
return false;
357-
}
358-
$(document).ready(function (e) {
359-
360-
// document.querySelectorAll('.article__text').forEach((e) => {
361-
// if (isUnicode(e.innerText)) {
362-
// e.style.direction = 'rtl'
363-
// }
364-
// })
365-
document.querySelectorAll('.desc').forEach((e) => {
366-
if (isUnicode(e.innerText)) { e.style.direction = 'rtl' }
367-
})
368-
369-
});
370-
</script>
371341
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
372342
{% endblock %}

0 commit comments

Comments
 (0)