Skip to content

Commit

Permalink
style: Add a theme to the timetable (#56)
Browse files Browse the repository at this point in the history
  • Loading branch information
zorexsalvo authored Jan 19, 2024
1 parent 0cc2313 commit 51a8cca
Show file tree
Hide file tree
Showing 6 changed files with 275 additions and 4 deletions.
255 changes: 255 additions & 0 deletions config/static/css/calendar_blue.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
/* calendar green */

.calendar_blue_main {
--color-header-background: rgb(11,20,46,1);
--color-cell-background-business: rgb(11,20,46,1);
--color-cell-background-nonbusiness: rgb(11,20,46,1);

--color-header-text: #666666;
--color-vertical-line-header: #dddddd;
--color-vertical-line-cell: #eeeeee;
--color-event-background: #419FE0a2;
--color-event-border: #47afff;
--color-event-bar: #1066a8;
--color-event-bar-background: transparent;
--color-event-text: #444444;
--width-vertical-line: 4px;
}

.calendar_blue_main {
border: 1px solid #999;
font-size: 13px;
font-family: "Fira-Sans";
}

.calendar_blue_colheader {
}

.calendar_blue_cornerright_inner {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-bottom: 1px solid #999;
color: #ffffff;
background: var(--color-header-background);
}

.calendar_blue_rowheader_inner {
font-size: 16pt;

text-align: right;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
color: #ffffff;
background: var(--color-header-background);
padding-right: 4px;
}

.calendar_blue_corner_inner {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
color: #ffffff;
background: var(--color-header-background);
}

.calendar_blue_rowheader_minutes {
font-size: 10px;
vertical-align: super;
padding-left: 2px;
padding-right: 2px;
}

.calendar_blue_colheader_inner {
text-align: center;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
color: #ffffff;
background: var(--color-header-background);

display: flex; align-items: center; justify-content: center;
}

.calendar_blue_cell_inner {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-right: 1px solid #ddd;
/*border-bottom: 0.5px solid #ddd;*/
background-color: var(--color-cell-background-nonbusiness);
}

.calendar_blue_cell_business .calendar_blue_cell_inner {
background-color: var(--color-cell-background-business);
}

.calendar_blue_alldayheader_inner {
text-align: center;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
color: #ffffff;
background-color: var(--color-header-background);
}

.calendar_blue_message {
padding: 10px;
opacity: 0.9;
color: #ffffff;
background: #000;
background: linear-gradient(to bottom, #999 0%, #666);
text-shadow: 0px -1px 1px rgba(000, 000, 000, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.3);
}

.calendar_blue_alldayevent {
border-radius: 15px; /* ie gradient + rounded corners problem */
overflow: hidden;
}

.calendar_blue_alldayevent_inner {
position: absolute;
overflow: hidden;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
padding: 4px;
margin-right: 1px;
font-size: 13px;
color: #ffffff;
background-color: var(--color-event-background);
border-radius: 5px;
border: 1px solid var(--color-event-border);
display: flex;
align-items: center;
}

.calendar_blue_event {
border-radius: 5px; /* ie gradient + rounded corners problem */
}

.calendar_blue_event_inner {
overflow: hidden;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin-right: 1px;
font-size: 13px;
padding: 2px 2px 2px 16px; /* make space for duration bar */
color: #ffffff;
background-color: var(--color-event-background);
border-radius: 5px;
border: 1px solid var(--color-event-border);
}

.calendar_blue_event_bar {
top: 0px;
bottom: 0px;
left: 0px;
width: 8px;
background-color: var(--color-event-bar-background);
}

.calendar_blue_event_bar_inner {
position: absolute;
width: 8px;
border-radius: 8px;
background-color: var(--color-event-bar);
}

.calendar_blue_shadow_inner {
background-color: #666666;
opacity: 0.5;
height: 100%;
border-radius: 5px;
}

.calendar_blue_event_delete {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAI5JREFUKFNtkLERgCAMRbmzdK8s4gAUlhYOYEHJEJYOYOEwDmGBPxC4kOPfvePy84MGR0RJ2N1A8H3N6DATwSQ57m2ql8NBG+AEM7D+UW+wjdfUPgerYNgB5gOLRHqhcasg84C2QxPMtrUhSqQIhg7ypy9VM2EUZPI/4rQ7rGxqo9sadTegw+UdjeDLAKUfhbaQUVPIfJYAAAAASUVORK5CYII=) center center no-repeat;
opacity: 0.6;
cursor: pointer;
}

.calendar_blue_event_delete:hover {
opacity: 1;
}

.calendar_blue_scroll_up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH2wESDiYcrhwCiQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAARnQU1BAACxjwv8YQUAAACcSURBVHjaY2AgF9wWsTW6yGMlhi7OhC7AyMDQzMnBXIpFHAFuCtuaMTP+P8nA8P/b1x//FfW/HHuF1UQmxv+NUP1c3OxMVVhNvCVi683E8H8LXOY/w9+fTH81tF8fv4NiIpBRj+YoZtZ/LDUoJmKYhsVUpv0MDiyMDP96sIYV0FS2/8z9ICaLlOhvS4b/jC//MzC8xBG0vJeF7GQBlK0xdiUzCtsAAAAASUVORK5CYII=);
}

.calendar_blue_scroll_down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAACqSURBVChTY7wpam3L9J+xmQEP+PGPKZZxP4MDi4zI78uMDIwa2NT+Z2DYovrmiC+TI8OBP/8ZmEqwGvif4e8vxr+FIDkmEKH25vBWBgbG0+iK/zEwLtF+ffwOXCGI8Y+BoRFFIdC030x/WmBiYBNhpgLdswNJ8RSYaSgmgk39z1gPUfj/29ef/9rwhQTDHRHbrbdEbLvRFcGthkkAra/9/uMvhkK8piNLAgCRpTnNn4AEmAAAAABJRU5ErkJggg==);
}

.calendar_blue_now {
background-color: red;
}

.calendar_blue_now:before {
content: '';
top: -5px;
border-width: 5px;
border-color: transparent transparent transparent red;
border-style: solid;
width: 0px;
height: 0px;
position: absolute;
-moz-transform: scale(.9999);
}

.calendar_blue_shadow_forbidden .calendar_blue_shadow_inner {
background-color: red;
}

.calendar_blue_shadow_top {
box-sizing: border-box;
padding: 2px;
border: 1px solid #ccc;
background: #fff;
background: linear-gradient(to bottom, #ffffff 0%, #eeeeee);
}

.calendar_blue_shadow_bottom {
box-sizing: border-box;
padding: 2px;
border: 1px solid #ccc;
background: #fff;
background: linear-gradient(to bottom, #ffffff 0%, #eeeeee);
}

.calendar_blue_crosshair_vertical, .calendar_blue_crosshair_horizontal, .calendar_blue_crosshair_left, .calendar_blue_crosshair_top {
background-color: gray;
opacity: 0.2;
}

.calendar_blue_loading {
background-color: orange;
color: white;
padding: 2px;
}

Binary file added config/static/img/function/ayala.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added config/static/img/function/belair.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added config/static/img/function/magallanes.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions config/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
<!-- <link rel="stylesheet" href="{% static 'css/styles.css' %}" /> -->
<link rel="stylesheet" href="{% static 'css/pycon.css' %}" />
<link rel="stylesheet" href="{% static 'css/splide.min.css' %}">
<link rel="stylesheet" href="{% static 'css/calendar_blue.css' %}">
{% endcompress %}

{% block extra_css %}
Expand Down
23 changes: 19 additions & 4 deletions pyconph/home/templates/home/_schedules.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{% load static %}


<div class="relative pb-150 md:pb-300" id="program-schedule">
<div class="max-w-975 mx-auto px-25 lg:px-0">
<p class="font-baybayinsisil text-20 md:text-24 text-yellow">
Expand Down Expand Up @@ -47,17 +46,33 @@ <h2 class="font-medium text-48 md:text-80 text-white mb-20">
const config = {
startDate: "2024-02-25",
viewType: "Resources",
theme: "calendar_blue",
businessBeginsHour: 8,
cellHeight: 50,
timeRangeSelectedHandling: "Disabled",
eventMoveHandling: "Disabled",
eventResizeHandling: "Disabled",
eventClickHandling: "Disabled",
columns: [
{name: "Track 1", id: "track1"},
{name: "Track 2", id: "track2"},
{name: "Track 3", id: "track3"},
{name: "[Track 1] Ayala Banquet", id: "track1", "image": "{% static 'img/function/ayala.jpg' %}"},
{name: "[Track 2] Magallanes", id: "track2", "image": "{% static 'img/function/magallanes.jpg' %}"},
{name: "[Track 3] Bel Air", id: "track3", "image": "{% static 'img/function/belair.jpg' %}"},
],
headerHeight: 90,
onBeforeHeaderRender: args => {
args.header.verticalAlignment = "top";
args.header.areas = [
{
left: "calc(50% - 30px)",
bottom: 5,
width: 60,
height: 60,
fontColor: "#999999",
image: args.column.data.image,
style: "box-sizing: border-box; border-radius: 50%; border: 3px solid #ffffff; overflow: hidden;",
}
];
}
};
const dp1 = new DayPilot.Calendar("dp1", { startDate: "2024-02-25", ...config });
const dp2 = new DayPilot.Calendar("dp2", { startDate: "2024-02-26", ...config });
Expand Down

0 comments on commit 51a8cca

Please sign in to comment.