kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init modal stuff.

Browse Source
This commit is contained in:
deepjyoti30
2020-05-14 11:58:14 +05:30
parent 993704e011
commit 4f028a77c6
5 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
css/main.css
View File

@@ -96,3 +96,23 @@ body {
color: #7986CB; } color: #7986CB; }
.main #other-content .foxxy h4, .main #other-content .foxxy a:hover { .main #other-content .foxxy h4, .main #other-content .foxxy a:hover {
color: #A1887F; } color: #A1887F; }
.settings-modal {
display: none;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
overflow: auto;
background: #fff; }
.settings-modal .modal-content {
border: 1px solid red; }
.settings-modal .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold; }
.settings-modal .close:hover, .settings-modal .close:focus {
color: black;
text-decoration: none;
cursor: pointer; }

7
index.html
View File

@@ -8,6 +8,12 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body> <body>
<div id="settings" class="settings-modal">
<div class="modal-content">
<span class="close">&times;</span>
<p>Testing</p>
</div>
</div>
<div id="main" class="main"> <div id="main" class="main">
<div id="message"> <div id="message">
<h1 id="message-text">Good Morning!</h1> <h1 id="message-text">Good Morning!</h1>
@@ -22,6 +28,7 @@
</div> </div>
</div> </div>
<!--Custom JS--> <!--Custom JS-->
<script src="js/settings.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>
</body> </body>
</html> </html>

9
js/main.js
View File

@@ -68,7 +68,14 @@ function initSearchBar(jsonData) {
if (event.key != 'Enter') return if (event.key != 'Enter') return
// Open google with the search results. // Open google with the search results.
query = document.getElementById(searchBarId).value.replace(/\ /g, "+") query = document.getElementById(searchBarId).value
if (query == "--setting") {
showSettings()
document.getElementById(searchBarId).value = ""
return
}
query = query.replace(/\ /g, "+")
document.location = searchUrl + query document.location = searchUrl + query
}) })
} }

18
js/settings.js Normal file
View File

@@ -0,0 +1,18 @@
/**
* File to handle editing the settings from the menu itself.
*
* A modal will be shown where the user can edit settings
* and finally when submitted, the settings will be written to
* the config.json and this config is read each time the page
* loads.
*/
modalId = "settings"
closeBtn = "close"
function showSettings() {
modalEl = document.getElementById(modalId)
closeBtn = document.getElementsByClassName(closeBtn)[0]
modalEl.style.display = "block"
closeBtn.onclick = () => {modalEl.style.display = "none"}
}

27
scss/main.scss
View File

@@ -176,4 +176,31 @@ body {
} }
} }
} }
}
.settings-modal {
display: none;
position: fixed;
z-index: 1;
width: 100%;
height: 100%;
overflow: auto;
background: $foreground;
.modal-content {
border: 1px solid red;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
&:hover, &:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
}
} }