Skip to content

Commit 5c43330

Browse files
civilcoder55civilcoder55
committed
improve and organize ui
1 parent 09bfc67 commit 5c43330

File tree

11 files changed

+112
-114
lines changed

11 files changed

+112
-114
lines changed

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

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
.alert-success {
2+
color: #3c763d;
3+
background-color: #dff0d8;
4+
border-color: #d6e9c6;
5+
}
6+
7+
.alert {
8+
padding: 15px;
9+
margin-bottom: 20px;
10+
border: 1px solid transparent;
11+
border-radius: 4px;
12+
}
113
@font-face {
214
font-family: "cairo-regular";
315
src: url("../fonts/cairo-regular-webfont.eot");
@@ -201,12 +213,12 @@ ul {
201213
margin: 0;
202214
}
203215
.header__logo h2 {
204-
font-family: 'cairo-regular';
216+
font-family: "cairo-regular";
205217
color: #666ee8;
206218
margin-bottom: 0;
207219
}
208220
.footer__logo h2 {
209-
font-family: 'cairo-regular';
221+
font-family: "cairo-regular";
210222
color: #666ee8;
211223
margin-bottom: 0;
212224
}
@@ -270,7 +282,7 @@ ul {
270282
transform: translateX(300px);
271283
}
272284
.header__nav a {
273-
font-size: 14px;
285+
font-size: 1em;
274286
color: #222831;
275287
margin-bottom: 20px;
276288
letter-spacing: 0.4px;
@@ -794,7 +806,6 @@ ul {
794806
font-weight: normal;
795807
font-size: 14px;
796808
color: rgba(34, 40, 49, 0.5);
797-
text-align: right;
798809
width: 100%;
799810
letter-spacing: 0.4px;
800811
}
@@ -876,7 +887,7 @@ ul {
876887
font-size: 14px;
877888
font-family: "cairo-semibold";
878889
letter-spacing: 0.4px;
879-
margin: 30px 0 0 auto;
890+
margin: 30px auto 0 0;
880891
}
881892
.form__btn:hover {
882893
color: #fff;
@@ -1017,7 +1028,6 @@ ul {
10171028
padding-bottom: 30px;
10181029
display: flex;
10191030
flex-direction: row;
1020-
justify-content: flex-end;
10211031
align-items: center;
10221032
}
10231033
.profile__head img {
@@ -1035,13 +1045,10 @@ ul {
10351045
margin-top: 20px;
10361046
display: flex;
10371047
flex-direction: column;
1038-
justify-content: flex-start;
1039-
align-items: flex-end;
10401048
}
10411049
.profile__nav a {
10421050
font-size: 16px;
10431051
line-height: 36px;
1044-
text-align: right;
10451052
letter-spacing: 0.4px;
10461053
color: rgba(34, 40, 49, 0.8);
10471054
}
@@ -1069,7 +1076,7 @@ ul {
10691076
font-size: 14px;
10701077
font-family: "cairo-semibold";
10711078
letter-spacing: 0.4px;
1072-
margin: 64px 0 0 auto;
1079+
margin: 64px auto 0 0;
10731080
}
10741081
.profile__btn:hover {
10751082
color: #222831;
@@ -1084,7 +1091,7 @@ ul {
10841091
padding: 40px 0;
10851092
}
10861093
.page__logo h2 {
1087-
font-family: 'cairo-regular';
1094+
font-family: "cairo-regular";
10881095
color: #666ee8;
10891096
margin-bottom: 0;
10901097
}

‎src/static/css/main.css‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
.alert-success {
2+
color: #3c763d;
3+
background-color: #dff0d8;
4+
border-color: #d6e9c6;
5+
}
6+
7+
.alert {
8+
padding: 15px;
9+
margin-bottom: 20px;
10+
border: 1px solid transparent;
11+
border-radius: 4px;
12+
}
113
@media only screen and (max-width: 600px) {
214
.article__gallery img {
315
width: 100%;
@@ -277,7 +289,7 @@ ul {
277289
transform: translateX(300px);
278290
}
279291
.header__nav a {
280-
font-size: 14px;
292+
font-size: 1em;
281293
color: #fff;
282294
margin-bottom: 20px;
283295
letter-spacing: 0.4px;
@@ -803,7 +815,6 @@ ul {
803815
font-weight: normal;
804816
font-size: 14px;
805817
color: rgba(236, 236, 236, 0.5);
806-
text-align: right;
807818
width: 100%;
808819
letter-spacing: 0.4px;
809820
}
@@ -885,7 +896,7 @@ ul {
885896
font-size: 14px;
886897
font-family: "cairo-semibold";
887898
letter-spacing: 0.4px;
888-
margin: 30px 0 0 auto;
899+
margin: 30px auto 0 0;
889900
}
890901
.form__btn:hover {
891902
color: #fff;
@@ -1026,7 +1037,6 @@ ul {
10261037
padding-bottom: 30px;
10271038
display: flex;
10281039
flex-direction: row;
1029-
justify-content: flex-end;
10301040
align-items: center;
10311041
}
10321042
.profile__head img {
@@ -1044,13 +1054,10 @@ ul {
10441054
margin-top: 20px;
10451055
display: flex;
10461056
flex-direction: column;
1047-
justify-content: flex-start;
1048-
align-items: flex-end;
10491057
}
10501058
.profile__nav a {
10511059
font-size: 16px;
10521060
line-height: 36px;
1053-
text-align: right;
10541061
letter-spacing: 0.4px;
10551062
color: #ececec;
10561063
}
@@ -1078,7 +1085,7 @@ ul {
10781085
font-size: 14px;
10791086
font-family: "cairo-semibold";
10801087
letter-spacing: 0.4px;
1081-
margin: 64px 0 0 auto;
1088+
margin: 64px auto 0 0;
10821089
}
10831090
.profile__btn:hover {
10841091
color: #fff;

‎src/static/js/bootstrap-notify.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/static/js/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ $(document).ready(function () {
129129
}
130130
}
131131

132-
133132
const switchButton = document.getElementById("switch");
134133
if (switchButton) switchButton.onclick = switchMode;
135134

@@ -153,3 +152,5 @@ $(document).ready(function () {
153152
}
154153
});
155154
});
155+
156+

‎src/static/js/ws.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
const socket = new WebSocket("ws://" + window.location.host + "/ws/notifier/");
2+
socket.onopen = function open() {
3+
console.log("WebSockets connection created.");
4+
};
5+
6+
socket.onmessage = function recieve(message) {
7+
const data = JSON.parse(message.data);
8+
const post = data.event;
9+
console.log(post);
10+
$.notifyClose();
11+
$.notify(
12+
{
13+
// options
14+
title: "new post collected",
15+
message: ",click to see it.",
16+
url: `/post/${post.id}`,
17+
target: "_blank",
18+
},
19+
{
20+
// settings
21+
type: "success",
22+
allow_dismiss: true,
23+
newest_on_top: true,
24+
placement: {
25+
from: "bottom",
26+
align: "center",
27+
},
28+
delay: 0,
29+
}
30+
);
31+
32+
if (window.location.pathname == "/home/" || window.location.pathname == "/") {
33+
$(".row.infinite-container").prepend(`
34+
<div class="col-12 col-md-6 col-lg-4 infinite-item">
35+
<div class="post">
36+
<div class="post__img">
37+
${post.thumnail_photo}
38+
</div>
39+
<div class="post__meta">
40+
<span>now</span>
41+
</div>
42+
<h3 class="post__title">${post.title}</h3>
43+
<div class="post__wrap">
44+
<a href="/post/${post.id}" class="post__link">Read more</a>
45+
<div class="post__comments">
46+
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
47+
<path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z'
48+
style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
49+
<path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11'
50+
style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
51+
</svg>
52+
0
53+
</div>
54+
</div>
55+
</div>
56+
</div>`);
57+
}
58+
};

‎src/templates/layout/base.html‎

Lines changed: 8 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -112,94 +112,19 @@ <h2>TheCollector</h2>
112112
<script src="{% static 'js/main.js' %}"></script>
113113
<script src="{% static 'js/swal.js' %}"></script>
114114
<script src="{% static 'js/bootstrap-notify.min.js' %}"></script>
115+
<script src="{% static 'js/ws.js' %}"></script>
116+
115117

116118
{% if messages %}
117-
{% for message in messages %}
118-
<script>
119-
Swal.fire({ text: "{{message}}", icon: "{{message.tags}}" });
120-
</script>
121-
{% endfor %}
119+
{% for message in messages %}
120+
<script>
121+
Swal.fire({ text: "{{message}}", icon: "{{message.tags}}" });
122+
</script>
123+
{% endfor %}
122124
{% endif %}
125+
123126
{% block script %} {% endblock %}
124127

125-
126-
{% if user.is_authenticated %}
127-
<style>
128-
.alert-success {
129-
color: #3c763d;
130-
background-color: #dff0d8;
131-
border-color: #d6e9c6;
132-
}
133-
134-
.alert {
135-
padding: 15px;
136-
margin-bottom: 20px;
137-
border: 1px solid transparent;
138-
border-radius: 4px;
139-
}
140-
</style>
141-
<script>
142-
var socket = new WebSocket('ws://' + window.location.host + '/ws/notifier/');
143-
socket.onopen = function open() {
144-
console.log('WebSockets connection created.');
145-
};
146-
147-
socket.onmessage = function recieve(message) {
148-
149-
const data = JSON.parse(message.data);
150-
const post = data.event
151-
console.log(post)
152-
$.notifyClose();
153-
$.notify({
154-
// options
155-
title: 'new post collected',
156-
message: 'click here to see it ',
157-
url: `/post/${post.id}`,
158-
target: '_blank',
159-
}, {
160-
// settings
161-
type: 'success',
162-
allow_dismiss: true,
163-
newest_on_top: true,
164-
placement: {
165-
from: "bottom",
166-
align: "center",
167-
},
168-
delay: 0
169-
});
170-
171-
if (window.location.pathname == '/home/' || window.location.pathname == '/') {
172-
$('.row.infinite-container').prepend(`
173-
<div class="col-12 col-md-6 col-lg-4 infinite-item">
174-
<div class="post">
175-
<div class="post__img">
176-
${post.thumnail_photo}
177-
</div>
178-
<div class="post__meta">
179-
<span>now</span>
180-
</div>
181-
<h3 class="post__title">${post.title}</h3>
182-
<div class="post__wrap">
183-
<a href="/post/${post.id}" class="post__link">Read more</a>
184-
<div class="post__comments">
185-
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
186-
<path d='M431,320.6c-1-3.6,1.2-8.6,3.3-12.2a33.68,33.68,0,0,1,2.1-3.1A162,162,0,0,0,464,215c.3-92.2-77.5-167-173.7-167C206.4,48,136.4,105.1,120,180.9a160.7,160.7,0,0,0-3.7,34.2c0,92.3,74.8,169.1,171,169.1,15.3,0,35.9-4.6,47.2-7.7s22.5-7.2,25.4-8.3a26.44,26.44,0,0,1,9.3-1.7,26,26,0,0,1,10.1,2L436,388.6a13.52,13.52,0,0,0,3.9,1,8,8,0,0,0,8-8,12.85,12.85,0,0,0-.5-2.7Z'
187-
style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
188-
<path d='M66.46,232a146.23,146.23,0,0,0,6.39,152.67c2.31,3.49,3.61,6.19,3.21,8s-11.93,61.87-11.93,61.87a8,8,0,0,0,2.71,7.68A8.17,8.17,0,0,0,72,464a7.26,7.26,0,0,0,2.91-.6l56.21-22a15.7,15.7,0,0,1,12,.2c18.94,7.38,39.88,12,60.83,12A159.21,159.21,0,0,0,284,432.11'
189-
style='fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/>
190-
</svg>
191-
0
192-
</div>
193-
</div>
194-
</div>
195-
</div>`)
196-
}
197-
198-
}
199-
</script>
200-
{% endif %}
201-
202-
203128
</body>
204129

205130
</html>

‎src/templates/users/profile/delete.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h1 class="section__title">Profile</h1>
1515
<section class="section section--profile section--last">
1616
<div class="container">
1717
<div class="row">
18-
<div class="col-12 col-md-7 col-lg-8 order-2 order-md-1">
18+
<div class="col-12 col-md-7 col-lg-8 order-2 order-md-2">
1919
<form action="" method="POST" class="form">
2020
{% csrf_token %}
2121
<div class="row">
@@ -34,7 +34,7 @@ <h5 style="font-size: 20px;color: #342ead;width: 100%;text-align: center;margin-
3434

3535
</div>
3636

37-
<div class="col-12 col-md-5 col-lg-4 order-1 order-md-2">
37+
<div class="col-12 col-md-5 col-lg-4 order-1 order-md-1">
3838
<div class="profile">
3939
<div class="profile__head">
4040
<span>{{user.first_name}} {{user.last_name}}</span>

‎src/templates/users/profile/device.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h1 class="section__title">Profile</h1>
1616
<section class="section section--profile section--last">
1717
<div class="container">
1818
<div class="row">
19-
<div class="col-12 col-md-7 col-lg-8 order-2 order-md-1">
19+
<div class="col-12 col-md-7 col-lg-8 order-2 order-md-2">
2020
{% if type == 'None' %}
2121
<form action="{% url '2fa_activate' %}" class="form">
2222
<div class="row">
@@ -85,7 +85,7 @@ <h4 class="form__title">Account Security</h4>
8585
{% endif %}
8686
</div>
8787

88-
<div class="col-12 col-md-5 col-lg-4 order-1 order-md-2">
88+
<div class="col-12 col-md-5 col-lg-4 order-1 order-md-1">
8989
<div class="profile">
9090
<div class="profile__head">
9191
<span>{{user.first_name}} {{user.last_name}}</span>

0 commit comments

Comments
 (0)