DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Another attempt at fixing settings positioning

Browse Source
This commit is contained in:
Kevin Dao
2019-08-13 22:57:59 -05:00
parent 998c40414a
commit b9553121da
2 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
css/popup.css
View File

@@ -28,12 +28,13 @@ body {
#courseList { #courseList {
list-style-type: none; list-style-type: none;
padding: 5px; padding: 5px;
margin-bottom: 30px;
} }
#empty { #empty {
font-weight: normal; font-weight: normal;
font-size: large; font-size: large;
margin: 60px 30px 180px 30px; margin: 60px 30px 200px 30px;
text-align: center; text-align: center;
} }
@@ -103,19 +104,24 @@ i {
padding: 4px 0px; padding: 4px 0px;
} }
#header { #card-header {
border-radius: 7px; border-radius: 7px;
} }
.settings { #card-body {
position: relative; position: relative;
}
.settings {
position: absolute;
bottom: 0px;
right: 0px;
display: flex; display: flex;
float: right;
vertical-align: middle; vertical-align: middle;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: 0.3s; transition: 0.3s;
padding: 7px 5px 5px 7px; padding: 7px 5px 5px 7px;
margin: 0px 10px 10px 0px; margin: 0px 10px 0px 0px;
border-radius: 7px; border-radius: 7px;
} }

88
popup.html
View File

@@ -9,7 +9,7 @@
<body> <body>
<div class="card" id="header"> <div class="card" id="card-header">
<div id="buttons" style="padding: 5px 10px 5px 10px;display: flex;justify-content: space-between;"> <div id="buttons" style="padding: 5px 10px 5px 10px;display: flex;justify-content: space-between;">
<button id="clear" class="matbut" style="font-size:15px; background:#4CAF50;margin: 7px;">Clear All</button> <button id="clear" class="matbut" style="font-size:15px; background:#4CAF50;margin: 7px;">Clear All</button>
<button id="schedule" class="matbut" style="font-size:15px;background:#FF9800;margin: 7px;">Course List</button> <button id="schedule" class="matbut" style="font-size:15px;background:#FF9800;margin: 7px;">Course List</button>
@@ -17,7 +17,8 @@
</div> </div>
</div> </div>
<div> <div id="card-body">
<ul id="courseList"></ul> <ul id="courseList"></ul>
<h2 id="empty"> <h2 id="empty">
<div id="main">Doesn't Look Like <div id="main">Doesn't Look Like
@@ -26,59 +27,60 @@
</div> </div>
<span>(No Courses Saved)</span> <span>(No Courses Saved)</span>
</h2> </h2>
</div>
<div style=" margin-bottom: 0px; display:inline-block"></div> <div style="margin-bottom: 0px; display:inline-block"></div>
<input type="file" id="import_input" accept=".json" style="display:none" /> <input type="file" id="import_input" accept=".json" style="display:none" />
<div class="settings"> <div class="settings">
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut" <button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut"
id='search'> id='search'>
<i style='color:#FF9800' class="material-icons"> <i style='color:#FF9800' class="material-icons">
search search
</i> </i>
</button> </button>
<div id="search-popup" class="hide"> <div id="search-popup" class="hide">
<div class="flex-container"> <div class="flex-container">
<div id='semcon' class="select-style item">
<label>
<select id="semesters"></select>
</label>
</div>
<input type="text" id="class_id_input" class="item" name="class_id" maxlength="5"
placeholder="Course ID #"></input>
<div id='semcon' class="select-style item">
<label>
<select id="semesters"></select>
</label>
</div> </div>
<input type="text" id="class_id_input" class="item" name="class_id" maxlength="5" <button id="search-class" class="matbut">Search</button>
placeholder="Course ID #"></input>
</div> </div>
<button id="search-class" class="matbut">Search</button> <button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
</div> <i style='color:#FF9800' class="material-icons">
import_export
</i>
</button>
<button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'> <div id="import-export-popup" class="hide">
<i style='color:#FF9800' class="material-icons"> <div class="flex-container">
import_export <button id="import-class" class="simple-menu-option">
</i> <i class="material-icons">file_upload</i>Import Classes
</button> </button>
<button id="export-class" class="simple-menu-option">
<div id="import-export-popup" class="hide"> <i class="material-icons">file_download</i>Export Classes
<div class="flex-container"> </button>
<button id="import-class" class="simple-menu-option"> </div>
<i class="material-icons">file_upload</i>Import Classes
</button>
<button id="export-class" class="simple-menu-option">
<i class="material-icons">file_download</i>Export Classes
</button>
</div> </div>
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut"
id='options_button'>
<i style='color:#FF9800' class="material-icons">
settings
</i></button>
</div> </div>
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='options_button'>
<i style='color:#FF9800' class="material-icons">
settings
</i></button>
</div> </div>
<script src="js/lib/jquery-3.3.1.min.js"></script> <script src="js/lib/jquery-3.3.1.min.js"></script>