xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-02-18 08:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

add topnav

Browse Source
This commit is contained in:
xfarrow 2024-03-20 16:40:35 +01:00
parent 2633f1f9f3
commit de96018e7e
3 changed files with 96 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/vanilla/css/profile.css
View File

@ -38,7 +38,8 @@ h2 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.job h3, .education h3 { .job h3,
.education h3 {
color: #444; color: #444;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -72,4 +73,3 @@ footer {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
} }

71
frontend/vanilla/css/topnav.css Normal file
View File

@ -0,0 +1,71 @@
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
@media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a,
.topnav input[type=text],
.topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}

25
frontend/vanilla/html/userprofile.html
View File

@ -6,10 +6,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title> <title>Page Title</title>
<link rel="stylesheet" href="../css/profile.css"> <link rel="stylesheet" href="../css/profile.css">
<link rel="stylesheet" href="../css/topnav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body style="display: none;"> <body>
<div class="container"> <div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#contact">Discover</a>
<a href="#contact">Your Job Applications</a>
<a href="#contact">Messages</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="button" onclick="onSearchButtonClick()"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div class="container" id="container" style="display: none;">
<div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div> <div class="edit-badge" style="display: none;" id="editBadge" onclick="editProfile()">Edit</div>
<header> <header>
<img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture"> <img src="../content/profile-picture-example.jpg" alt="Profile Picture" class="profile-picture">
@ -82,7 +97,7 @@
const data = await response.json(); const data = await response.json();
if (response.ok) { if (response.ok) {
populateFields(data.display_name, data.email, data.about_me, data.qualification); populateFields(data.display_name, data.email, data.about_me, data.qualification);
document.body.style.display = 'block'; // Show page document.getElementById('container').style.display = 'block'; // Show page
} else if (response.status == 401) { } else if (response.status == 401) {
window.location.href = 'login.html'; window.location.href = 'login.html';
} else { } else {
@ -101,6 +116,10 @@
function editProfile() { function editProfile() {
alert('Editing'); alert('Editing');
} }
function onSearchButtonClick(){
alert('Searching for something...');
}
</script> </script>
</body> </body>