From 6bcfe72dc33ef5edc8fa37c8f1a842ff745204d1 Mon Sep 17 00:00:00 2001 From: sghsri Date: Sat, 21 Sep 2019 20:00:51 -0500 Subject: [PATCH] removed popup inline styling --- css/popup.css | 187 +++++++++++++++++++++++++++++++++++++++++------- js/Template.js | 43 ++++++----- js/popup.js | 8 +-- js/utplanner.js | 2 +- popup.html | 55 +++++--------- 5 files changed, 203 insertions(+), 92 deletions(-) diff --git a/css/popup.css b/css/popup.css index 97367cc0..14a51408 100644 --- a/css/popup.css +++ b/css/popup.css @@ -26,13 +26,34 @@ body { position: relative; } -#courseList { +.conflict_message{ + font-size:small; + font-weight:bold; + color:red; + margin:5px 5px 5px 10px; +} + +.course_list { list-style-type: none; padding: 5px; 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-size: large; margin: 60px 30px 200px 30px; @@ -50,7 +71,44 @@ body { 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; border: 0px; border-radius: 50%; @@ -59,11 +117,11 @@ body { } -.settingsbut:focus { +.settings_button:focus { 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); opacity: 1; } @@ -72,12 +130,12 @@ body { box-shadow: 0 0 0 1pt #FF9800; } -.settingsbut:focus:after:hover { +.settings_button:focus:after:hover { outline: 0; transition: 0.3s; } -.copybut { +.copy_button { background-color: transparent; padding: 0px; border: none; @@ -87,7 +145,7 @@ body { transition: .2s; } -.copybut:focus { +.copy_button:focus { 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); } -#copyicon { - font-size: x-large; - border-radius: 50%; - padding: 3px; -} - i { 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; } +.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 { position: absolute; bottom: 0px; @@ -122,11 +207,7 @@ i { border-radius: 7px; } -/* .settings:hover { - box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19); -} */ - -.matbut { +.material_button { border: none; outline: none; cursor: pointer; @@ -137,22 +218,74 @@ i { font-size: medium; font-style: bold; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); - background: #ff9800; -} - -.matbut { position: relative; overflow: hidden; } -.truncate { +.course_name_truncate_box { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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: ""; position: absolute; top: 50%; @@ -231,7 +364,7 @@ i { } } -.matbut:focus:not(:active)::after { +.material_button:focus:not(:active)::after { animation: ripple 1s ease-out; } diff --git a/js/Template.js b/js/Template.js index dee3c9d3..acdac8ff 100644 --- a/js/Template.js +++ b/js/Template.js @@ -85,7 +85,7 @@ class Template { - ` + ` } } @@ -131,32 +131,31 @@ class Template { static Popup = class Popup { static list_item(i, list_tile_color, unique, department, number, profname, list_sub_color, line) { - return `
  • -
    + return `
  • +
    - -

    - ${department} ${number} with ${profname} (${unique}) + +

    + ${department} ${number} with ${profname} (${unique})

    -

    ►

    +

    ►

    -
    • `; } static conflict_message(conflict_message) { - return `

    ${conflict_message}` + return `

    ${conflict_message}` } static line(line) { @@ -168,10 +167,10 @@ class Template { location_full } = line; - return `${days}: - ${start_time} to ${end_time} - - ${location_full} + return `${days}: + ${start_time} to ${end_time} + + ${location_full}
    ` } @@ -192,4 +191,4 @@ class Template { } } -} \ No newline at end of file +} diff --git a/js/popup.js b/js/popup.js index 237d3470..8969a267 100644 --- a/js/popup.js +++ b/js/popup.js @@ -220,13 +220,13 @@ $("#options_button").click(function () { }); }); -$("#courseList").on('mouseover', '.copybut', function () { +$("#courseList").on('mouseover', '.copy_button', function () { $(this).addClass('shadow'); -}).on('mouseleave', '.copybut', function () { +}).on('mouseleave', '.copy_button', function () { $(this).removeClass('shadow'); }); -$("#courseList").on('click', '.copybut', function (e) { +$("#courseList").on('click', '.copy_button', function (e) { e.stopPropagation(); copyButtonAnimation($(this)); let unique = $(this).val(); @@ -343,7 +343,7 @@ function copyButtonAnimation(copy_button) { function toggleTimeDropdown(clicked_item) { 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")) { $(more_info_button).fadeIn(200); $(arrow).css('transform', 'rotate(90deg)'); diff --git a/js/utplanner.js b/js/utplanner.js index 422c7e78..88e8eefe 100644 --- a/js/utplanner.js +++ b/js/utplanner.js @@ -231,4 +231,4 @@ function allowClosing() { function close() { $("#myModal").fadeOut(Timing.fade_time); $("#snackbar").attr("class", ""); -} \ No newline at end of file +} diff --git a/popup.html b/popup.html index cc8313b6..e1e247ef 100644 --- a/popup.html +++ b/popup.html @@ -8,41 +8,29 @@ - -

    -
    - - - +
    +
    + + +
    -
    - -
      -

      -
      Doesn't Look Like - Anything - To Me. -
      +
        +

        +
        Doesn't Look Like Anything To Me.
        (No Courses Saved)

        - -
        - - +
        +

        17 hr

        - -
        @@ -64,18 +52,12 @@
        -
        - +
        - - -
        -