Skip to content

Commit e22ccaa

Browse files
committed
some updates in the layout
1 parent d6fba93 commit e22ccaa

File tree

9 files changed

+176
-112
lines changed

9 files changed

+176
-112
lines changed

__pycache__/settings.cpython-311.pyc

331 Bytes
Binary file not shown.
46 Bytes
Binary file not shown.

routes/index.py

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
1111
"""
1212

13-
from flask import (render_template, Blueprint,
14-
request, current_app)
13+
from flask import (render_template, Blueprint, request, current_app)
1514
from models.filter import Filter
1615

16+
1717
# create and configure the blueprint
1818
index_bp = Blueprint(
1919
'index_bp', __name__,
@@ -43,11 +43,10 @@ def search():
4343
Returns:
4444
The rendered result page template with the search parameters and filtered repositories.
4545
"""
46-
topic = request.form.get('topic')
46+
topic = request.form.get('topic').replace(' ', '-')
4747
rating = request.form.get('rating')
4848
language = request.form.get('language')
49-
repositories = Filter.search_repositories(
50-
language, topic, rating, current_app.config['TOKEN'])
49+
repositories = Filter.search_repositories(language, topic, rating, current_app.config['TOKEN'])
5150
filtered_repos = []
5251
if repositories is not None:
5352
for repo in repositories:

settings.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,4 @@ class Config:
3737
# Enable debug mode.
3838
DEBUG = True
3939
# put your token here
40-
TOKEN = "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"
40+
TOKEN = "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"

static/script.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
document.querySelector('.search-button').addEventListener('click', function() {
22
var topicSelect = document.getElementById('topic-select');
33
var ratingSelect = document.getElementById('rating-select');
4-
4+
55
var selectedTopic = topicSelect.value;
66
var selectedRating = ratingSelect.value;
7-
7+
88
// Perform the search based on the selected values
99
// Add your search logic here
10-
10+
1111
console.log("Selected Topic:", selectedTopic);
1212
console.log("Selected Rating:", selectedRating);
1313
});
@@ -16,3 +16,16 @@ function toggleDropdown() {
1616
var dropdownContent = document.getElementById("topic-dropdown");
1717
dropdownContent.style.display = "block";
1818
}
19+
20+
21+
$(document).ready(function() {
22+
$('#search-button').click(function() {
23+
var $progressContainer = $('#progress-container');
24+
$progressContainer.toggleClass('show');
25+
26+
// Simulating a delay of 3 seconds for demonstration purposes
27+
setTimeout(function() {
28+
$progressContainer.removeClass('show');
29+
}, 3000);
30+
});
31+
});

static/style.css

Lines changed: 88 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
/* CSS styles for the search container */
22
body{
3-
color: #fff;
3+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
4+
font-size: 16px;
5+
line-height: 1.5;
6+
background-color: #222 !important;
7+
color: #fff !important;
48
}
9+
510
.container {
611
margin: 20px auto;
712
padding: 20px;
8-
background-color: #fff;
13+
background-color: #222;
914
padding-bottom: 60px; /* Adjust the value as needed */
1015
}
1116

@@ -15,91 +20,71 @@ body{
1520
align-items: center;
1621
margin-top: 20px;
1722
text-align: center;
23+
1824
}
1925

20-
/* CSS styles for the mobile header */
2126
.mobile-header {
2227
margin-bottom: 20px;
28+
color: #fff;
2329
}
2430

25-
/* CSS styles for the mobile menu */
26-
.mobile-menu {
31+
.search-bar {
2732
display: flex;
28-
flex-wrap: wrap;
33+
align-items: center;
2934
justify-content: center;
3035
margin-bottom: 20px;
3136
}
3237

33-
/* CSS styles for the dropdown */
34-
.filter-dropdown {
35-
margin: 0 10px;
36-
flex-grow: 1;
37-
max-width: 200px;
38-
}
38+
.search-bar label {
39+
margin-right: 10px;
3940

40-
.filter-dropdown label {
41-
display: block;
42-
margin-bottom: 4px;
4341
}
4442

45-
.filter-dropdown select {
46-
padding: 8px;
47-
border: 1px solid #ccc;
48-
border-radius: 4px;
49-
font-size: 16px;
50-
width: 100%;
51-
box-sizing: border-box;
43+
.search-button-container {
44+
margin-top: 16px;
5245
}
5346

5447
.search-button {
55-
padding: 12px 24px;
56-
background-color: #4CAF50;
48+
padding: 8px 16px;
49+
background-color: #007bff;
5750
color: white;
5851
border: none;
5952
border-radius: 4px;
6053
font-size: 16px;
6154
cursor: pointer;
6255
transition: background-color 0.3s ease;
63-
max-width: 200px;
64-
margin-top: 10px;
6556
}
6657

6758
.search-button:hover {
6859
background-color: #45a049;
6960
}
7061

71-
/* Media queries for responsive design */
72-
@media screen and (max-width: 768px) {
73-
.search-container {
74-
max-width: 100%;
75-
padding: 0;
76-
}
77-
78-
.mobile-header {
79-
margin-top: 20px;
80-
}
81-
82-
.mobile-menu {
83-
flex-direction: column;
84-
align-items: center;
85-
}
86-
87-
.filter-dropdown {
88-
margin: 10px 0;
89-
max-width: none;
90-
}
91-
92-
.filter-dropdown select {
93-
width: 100%;
94-
}
95-
96-
.search-button {
97-
width: 100%;
98-
margin-top: 10px;
99-
margin-left: 0;
100-
}
62+
.dropdown-container {
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
68+
.filter-dropdown {
69+
margin: 0 10px;
70+
}
71+
72+
.filter-dropdown label {
73+
display: block;
74+
margin-bottom: 4px;
75+
color: #fff;
10176
}
10277

78+
.filter-dropdown select {
79+
padding: 8px;
80+
border: 1px solid #ccc;
81+
border-radius: 4px;
82+
font-size: 16px;
83+
background-color: #222;
84+
color: #fff;
85+
}
86+
87+
10388
/* Style for table responsive layout */
10489
.table-responsive {
10590
margin-bottom: 20px;
@@ -109,7 +94,21 @@ body{
10994
.table-responsive {
11095
overflow-x: auto;
11196
}
97+
11298
}
99+
/* Custom CSS */
100+
/* Custom CSS */
101+
@media (max-width: 576px) {
102+
#topic-dropdown {
103+
width: 100%;
104+
max-width: 100%;
105+
}
106+
107+
#topic-dropdown option {
108+
width: 100%;
109+
}
110+
}
111+
113112
.search-button-container {
114113
margin-top: 16px;
115114
}
@@ -120,6 +119,38 @@ body{
120119
width: auto;
121120
padding: 0 20px;
122121
}
122+
.container {
123+
/* Add your container styles here */
124+
}
125+
126+
.progress-container {
127+
display: none;
128+
align-items: center;
129+
justify-content: center;
130+
height: 50px;
131+
}
132+
133+
.progress-spinner {
134+
border: 4px solid #f3f3f3;
135+
border-top: 4px solid #3498db;
136+
border-radius: 50%;
137+
width: 30px;
138+
height: 30px;
139+
animation: spin 1s linear infinite;
140+
}
141+
142+
@keyframes spin {
143+
0% {
144+
transform: rotate(0deg);
145+
}
146+
100% {
147+
transform: rotate(360deg);
148+
}
149+
}
150+
151+
.show {
152+
display: flex;
153+
}
123154

124155

125156
.footer {
@@ -131,4 +162,4 @@ body{
131162
left: 0;
132163
bottom: 0;
133164
width: 100%;
134-
}
165+
}

templates/base.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
<!-- add the bootstrap link here -->
1515
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1617
</head>
1718

1819
<body>
@@ -23,4 +24,4 @@
2324

2425
</body>
2526

26-
</html>
27+
</html>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy