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

removed popup inline styling

Browse Source
This commit is contained in:
sghsri
2019-09-21 20:00:51 -05:00
parent d9fe0cb024
commit 6bcfe72dc3
5 changed files with 203 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
css/popup.css
View File

@@ -26,13 +26,34 @@ body {
position: relative; position: relative;
} }
#courseList { .conflict_message{
font-size:small;
font-weight:bold;
color:red;
margin:5px 5px 5px 10px;
}
.course_list {
list-style-type: none; list-style-type: none;
padding: 5px; padding: 5px;
margin-bottom: 30px; margin-bottom: 30px;
} }
#empty { .course_list_card {
cursor: pointer;
}
.course_list_item {
padding: 0px 5px 5px 5px;
overflow-y: auto;
max-height:400px;
}
.course_list_item_subtext {
font-size:medium;
}
.empty_message {
font-weight: normal; font-weight: normal;
font-size: large; font-size: large;
margin: 60px 30px 200px 30px; margin: 60px 30px 200px 30px;
@@ -50,7 +71,44 @@ body {
font-weight: bold; font-weight: bold;
} }
.settingsbut {
.time_line_days {
display:inline-block;
width: 20%;
}
.time_line_hours {
margin-left:10px;
display:inline-block;
width: 50%;
text-align:center;
}
.time_line_location {
float:right;
display:inline-block;
text-align:right;
width: 25%;
}
.time_line_location_link {
color:#3c87a3;
text-decoration:none;
}
.more_info_button{
background: #2196F3;
}
.remove_button {
background: #F44336;
}
.register_button {
background: #4CAF50;
}
.settings_button {
margin-right: 2px; margin-right: 2px;
border: 0px; border: 0px;
border-radius: 50%; border-radius: 50%;
@@ -59,11 +117,11 @@ body {
} }
.settingsbut:focus { .settings_button:focus {
outline: 0; outline: 0;
} }
.settingsbut:hover { .settings_button:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 15px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16), 0 4px 15px 0 rgba(0, 0, 0, 0.12);
opacity: 1; opacity: 1;
} }
@@ -72,12 +130,12 @@ body {
box-shadow: 0 0 0 1pt #FF9800; box-shadow: 0 0 0 1pt #FF9800;
} }
.settingsbut:focus:after:hover { .settings_button:focus:after:hover {
outline: 0; outline: 0;
transition: 0.3s; transition: 0.3s;
} }
.copybut { .copy_button {
background-color: transparent; background-color: transparent;
padding: 0px; padding: 0px;
border: none; border: none;
@@ -87,7 +145,7 @@ body {
transition: .2s; transition: .2s;
} }
.copybut:focus { .copy_button:focus {
outline: 0; outline: 0;
} }
@@ -95,20 +153,47 @@ body {
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.16);
} }
#copyicon {
font-size: x-large;
border-radius: 50%;
padding: 3px;
}
i { i {
padding: 4px 0px; padding: 4px 0px;
} }
#card-header { .copy_button_icon {
color:white;
float:left;
border-radius: 50%;
padding: 3px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
font-size: x-large;
}
.header_container{
border-radius: 7px; border-radius: 7px;
} }
.header_buttons {
padding: 5px 10px 5px 10px;
display: flex;
justify-content: space-between;
}
.header_button {
font-size:15px !important;
margin: 7px !important;
}
.clear_button {
background:#4CAF50;
}
.ris_button {
background:#FF9800;
}
.schedule_button {
background: #FF0000;
}
.settings { .settings {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
@@ -122,11 +207,7 @@ i {
border-radius: 7px; border-radius: 7px;
} }
/* .settings:hover { .material_button {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
} */
.matbut {
border: none; border: none;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
@@ -137,22 +218,74 @@ i {
font-size: medium; font-size: medium;
font-style: bold; font-style: bold;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
background: #ff9800;
}
.matbut {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.truncate { .course_name_truncate_box {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 80%; width: 80%;
color:white;
margin:5px;
display:inline-block;
font-size:large;
align-items:center;
} }
.matbut:after { .settings_divider {
margin-bottom: 0px;
display:inline-block;
}
.search_button {
background-color:white;
margin-left: 5px;
margin-right: 3px;
}
.course_list_item_options {
display: none;
}
.import_button {
background-color:white;
}
.options_button {
background-color:white;
margin-right: 0px;
}
.settings_icon {
color:#FF9800;
}
.course_list_item_time_box {
font-weight:bold;
padding:10px;
margin:0px 5px 0px 15px;
font-size:small;
}
.course_list_item_options_button_container {
border-radius:0px;
}
.course_list_item_options_buttons{
float:right;
margin:5px;
}
.arrow {
float:right;
font-size:small;
display:inline-block;
margin-top:10px;
color:white;
font-family: sans-serif;
}
.material_button:after {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -231,7 +364,7 @@ i {
} }
} }
.matbut:focus:not(:active)::after { .material_button:focus:not(:active)::after {
animation: ripple 1s ease-out; animation: ripple 1s ease-out;
} }

37
js/Template.js
View File

@@ -131,32 +131,31 @@ class Template {
static Popup = class Popup { static Popup = class Popup {
static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) { static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) {
return `<li id='${i}'style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'> return `<li id='${i}' class='course_list_item'>
<div class='card'> <div class='card course_list_card'>
<div class='container' style='background:${list_tile_color}'> <div class='container' style='background:${list_tile_color}'>
<button class='copybut' title='Copy Unique #' id='copybut' value='${unique}'> <button class='copy_button' title='Copy Unique #' value='${unique}'>
<i style='color:white;float:left;text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);font-size:x-large;' id='copyicon' class="material-icons copy">content_copy <i id='copyicon' class="material-icons copy_button_icon">content_copy</i>
</i>
</button> </button>
<h4 class='truncate' style='color:white;margin:5px; display:inline-block;font-size:large;align-items:center;'> <h4 class='course_name_truncate_box'>
<b>${department} ${number} <span style='font-size:medium'> with <span style='font-size:medium'>${profname} (${unique})</span></b> <b>${department} ${number} <span class='course_list_item_subtext'> with ${profname} (${unique})</span></b>
</h4> </h4>
<p id='arrow' style='float:right;font-size:small;display:inline-block;margin-top:10px;color:white;font-family: sans-serif'>&#9658;</p> <p id='arrow' class='arrow'>&#9658;</p>
</div> </div>
</div> </div>
<div id='moreInfo' style='display: none;'> <div id='moreInfo' class='course_list_item_options'>
<p style='font-weight:bold;padding:10px;margin:0px 5px 0px 15px;font-size:small;background-color:${list_sub_color};'>${line}</p> <p style='background-color:${list_sub_color};' class='course_list_item_time_box'>${line}</p>
<div id='infoButtons' style='border-radius:0px;'> <div id='infoButtons' class='course_list_item_options_button_container'>
<button class='matbut' id='listRemove'style='float:right;background:#F44336; margin:5px;'>Remove</button> <button class='material_button course_list_item_options_buttons remove_button' id='listRemove'>Remove</button>
<button class='matbut' id='register' style='float:right;background:#4CAF50; margin:5px;'>Register</button> <button class='material_button course_list_item_options_buttons register_button' id='register'>Register</button>
<button class='matbut' id='listMoreInfo' style='float:right;background:#2196F3; margin:5px;'>More Info</button> <button class='material_button course_list_item_options_buttons more_info_button' id='listMoreInfo'>More Info</button>
</div> </div>
</div> </div>
</li>`; </li>`;
} }
static conflict_message(conflict_message) { static conflict_message(conflict_message) {
return `<p id='conflict' style='font-size:small; font-weight:bold; color:red; margin:5px 5px 5px 10px'>${conflict_message}</>` return `<p id='conflict' class='conflict_message'>${conflict_message}</>`
} }
static line(line) { static line(line) {
@@ -168,10 +167,10 @@ class Template {
location_full location_full
} = line; } = line;
return `<span style='display:inline-block;width: 20%;'>${days}:</span> return `<span class='time_line_days'>${days}:</span>
<span style='margin-left:10px;display:inline-block;width: 50%;text-align:center;'>${start_time} to ${end_time}</span> <span class='time_line_hours'>${start_time} to ${end_time}</span>
<span style='float:right;display:inline-block;text-align:right;width: 25%;'> <span class='time_line_location'>
<a target='_blank' style='color:#3c87a3;text-decoration:none;'href='${location_link}'>${location_full}</a> <a target='_blank' class= 'time_line_location_link' href='${location_link}'>${location_full}</a>
</span> </span>
<br>` <br>`
} }

8
js/popup.js
View File

@@ -220,13 +220,13 @@ $("#options_button").click(function () {
}); });
}); });
$("#courseList").on('mouseover', '.copybut', function () { $("#courseList").on('mouseover', '.copy_button', function () {
$(this).addClass('shadow'); $(this).addClass('shadow');
}).on('mouseleave', '.copybut', function () { }).on('mouseleave', '.copy_button', function () {
$(this).removeClass('shadow'); $(this).removeClass('shadow');
}); });
$("#courseList").on('click', '.copybut', function (e) { $("#courseList").on('click', '.copy_button', function (e) {
e.stopPropagation(); e.stopPropagation();
copyButtonAnimation($(this)); copyButtonAnimation($(this));
let unique = $(this).val(); let unique = $(this).val();
@@ -343,7 +343,7 @@ function copyButtonAnimation(copy_button) {
function toggleTimeDropdown(clicked_item) { function toggleTimeDropdown(clicked_item) {
let more_info_button = $(clicked_item).find('#moreInfo'); let more_info_button = $(clicked_item).find('#moreInfo');
let arrow = $('clicked_item').find("#arrow"); let arrow = $(clicked_item).find("#arrow");
if ($(more_info_button).is(":hidden")) { if ($(more_info_button).is(":hidden")) {
$(more_info_button).fadeIn(200); $(more_info_button).fadeIn(200);
$(arrow).css('transform', 'rotate(90deg)'); $(arrow).css('transform', 'rotate(90deg)');

55
popup.html
View File

@@ -8,41 +8,29 @@
</head> </head>
<body> <body>
<div class="card" id="card-header" class='header_container'>
<div class="card" id="card-header"> <div id="buttons" class="header_buttons">
<div id="buttons" style="padding: 5px 10px 5px 10px;display: flex;justify-content: space-between;"> <button id="clear" class="material_button header_button clear_button">Clear All</button>
<button id="clear" class="matbut" style="font-size:15px; background:#4CAF50;margin: 7px;">Clear All</button> <button id="RIS" class="material_button header_button ris_button">Registrar Info </button>
<button id="RIS" class="matbut" style="font-size:15px;background:#FF9800;margin: 7px;">Registrar Info </button> <button id="calendar" class="material_button header_button schedule_button">My Schedule</button>
<button id="calendar" class="matbut" style="font-size:15px; background: #FF0000; margin:7px;">My Schedule</button>
</div> </div>
</div> </div>
<div> <div>
<ul id="courseList" class='course_list'></ul>
<ul id="courseList"></ul> <h2 id="empty" class='empty_message'>
<h2 id="empty"> <div id="main">Doesn't Look Like Anything To Me.</div>
<div id="main">Doesn't Look Like
Anything
To Me.
</div>
<span>(No Courses Saved)</span> <span>(No Courses Saved)</span>
</h2> </h2>
<div class="settings_divider"></div>
<div style="margin-bottom: 0px; display:inline-block"></div> <input type="file" id="import_input" accept=".json" class="hide" />
<input type="file" id="import_input" accept=".json" style="display:none" />
<div> <div>
<div id="meta-data" class="meta-container"> <div id="meta-data" class="meta-container">
<p class="meta"> <span class="meta-metric" id="meta-metric">17</span> hr</p> <p class="meta"> <span class="meta-metric" id="meta-metric">17</span> hr</p>
</div> </div>
<div class="settings"> <div class="settings">
<button title='Search' style="background-color:white;margin-left: 5px;margin-right: 3px;" class="settingsbut" <button title='Search' class="settings_button search_button" id='search'>
id='search'> <i class="material-icons settings_icon">search</i>
<i style='color:#FF9800' class="material-icons">
search
</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"> <div id='semcon' class="select-style item">
@@ -64,18 +52,12 @@
</select> </select>
</label> </label>
</div> </div>
<!-- <input type="text" id="class_id_input" class="class_id_input item" name="class_id" maxlength="5"
placeholder="Course ID #"></input> -->
</div> </div>
<button id="search-class" class="matbut">Search</button> <button id="search-class" class="material_button">Search</button>
</div> </div>
<button title='Import/Export' class="settings_button import_button" id='impexp'>
<button title='Import/Export' style="background-color:white;" class="settingsbut" id='impexp'> <i class="material-icons settings_icon">import_export</i>
<i style='color:#FF9800' class="material-icons">
import_export
</i>
</button> </button>
<div id="import-export-popup" class="hide"> <div id="import-export-popup" class="hide">
<div class="flex-container"> <div class="flex-container">
<button id="import-class" class="simple-menu-option"> <button id="import-class" class="simple-menu-option">
@@ -87,11 +69,8 @@
</div> </div>
</div> </div>
<button title='Options' style="background-color:white; margin-right: 0px;" class="settingsbut" <button title='Options' class="settings_button options_button" id='options_button'>
id='options_button'> <i class="material-icons settings_icon">settings</i>
<i style='color:#FF9800' class="material-icons">
settings
</i>
</button> </button>
</div> </div>
</div> </div>