Updated UI for search and cleaned up stuff

This commit is contained in:
Kevin Dao
2019-08-03 18:19:08 -05:00
parent becb70be12
commit e916b6faab
4 changed files with 157 additions and 117 deletions

View File

@@ -7,7 +7,8 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body style="position:relative;">
<body>
<div class="card" id="header">
<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>
@@ -15,6 +16,7 @@
<button id="calendar" class="matbut" style="font-size:15px; background: #FF0000; margin:7px;">My Schedule</button>
</div>
</div>
<div>
<ul id="courseList" style="list-style-type: none;padding: 5px;"></ul>
<h2 id="empty" style="font-weight: normal;font-size: large;margin: 60px 30px 40px 30px ;text-align: center">
@@ -24,45 +26,60 @@
</div>
<span style="font-size: small;display:table;margin:0 auto;font-weight: bold">(No Courses Saved)</span>
</h2>
<div style=" margin-bottom: 0px; display:inline-block"></div>
<input type="file" id="importOrig" accept=".json" style="display:none" />
<div class="settings">
<div id='semcon' class="select-style">
<select id="semesters" style="display: none;margin-right: 5px; border-color: #FF0000; margin-top: 3px;">
</select>
</div>
<div style=" margin-bottom: 0px; display:inline-block"></div>
<input type="file" id="importOrig" accept=".json" style="display:none" />
<div class="settings">
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut"
id='search'>
<i style='color:#FF9800' class="material-icons">
search
</i>
</button>
<div id="search-popup" class="hide">
<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>
<input type="text" id="class_id" name="class_id" maxlength="5" style="display:none;text-indent: 10px;border-style: solid; border-color:#FF0000;"
placeholder="Unique #?"></input>
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut" id='search'>
<i style='color:#FF9800' class="material-icons">
search
</i>
</button>
<button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
<i style='color:#FF0000' class="material-icons">
arrow_downward
</i>
</button>
<button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
<i style='color:#FF0000' ; class="material-icons">
arrow_upward
</i>
</button>
<button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
<i style='color:#FF9800' class="material-icons">
import_export
</i>
</button>
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
<i style='color:#FF9800' class="material-icons">
settings
</i></button>
<button id="search-class" class="matbut">Search</button>
</div>
<button title='Export' style="background-color:white; display:none;" class="settingsbut" id='export'>
<i style='color:#FF0000' class="material-icons">
arrow_downward
</i>
</button>
<button title='Import' style="background-color:white; display:none;" class="settingsbut" id='import'>
<i style='color:#FF0000' ; class="material-icons">
arrow_upward
</i>
</button>
<button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'>
<i style='color:#FF9800' class="material-icons">
import_export
</i>
</button>
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" id='open'>
<i style='color:#FF9800' class="material-icons">
settings
</i></button>
</div>
@@ -71,4 +88,4 @@
<script src="js/popup.js"></script>
</body>
</html>
</html>