diff --git a/website/static/website/css/event-display.css b/website/static/website/css/event-display.css new file mode 100644 index 0000000..7def40e --- /dev/null +++ b/website/static/website/css/event-display.css @@ -0,0 +1,330 @@ +/**************************************************************************** + * START BOOTSTRAP: The following is taken from Bootstrap v4.0.0-beta.2. + **************************************************************************** + * Copyright 2011-2017 The Bootstrap Authors + * Copyright 2011-2017 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE + ****************************************************************************/ + +.card { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + min-width: 0; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; +} + +.card > hr { + margin-right: 0; + margin-left: 0; +} + +.card > .list-group:first-child .list-group-item:first-child { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; +} + +.card > .list-group:last-child .list-group-item:last-child { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.card-body { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1.25rem; +} + +.card-title { + margin-bottom: 0.75rem; +} + +.card-subtitle { + margin-top: -0.375rem; + margin-bottom: 0; +} + +.card-text:last-child { + margin-bottom: 0; +} + +.card-link:hover { + text-decoration: none; +} + +.card-link + .card-link { + margin-left: 1.25rem; +} + +.card-header { + padding: 0.75rem 1.25rem; + margin-bottom: 0; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 1px solid rgba(0, 0, 0, 0.125); +} + +.card-header:first-child { + border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; +} + +.card-header + .list-group .list-group-item:first-child { + border-top: 0; +} + +.card-footer { + padding: 0.75rem 1.25rem; + background-color: rgba(0, 0, 0, 0.03); + border-top: 1px solid rgba(0, 0, 0, 0.125); +} + +.card-footer:last-child { + border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); +} + +.card-header-tabs { + margin-right: -0.625rem; + margin-bottom: -0.75rem; + margin-left: -0.625rem; + border-bottom: 0; +} + +.card-header-pills { + margin-right: -0.625rem; + margin-left: -0.625rem; +} + +.card-img-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding: 1.25rem; +} + +.card-img { + width: 100%; + border-radius: calc(0.25rem - 1px); +} + +.card-img-top { + width: 100%; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} + +.card-img-bottom { + width: 100%; + border-bottom-right-radius: calc(0.25rem - 1px); + border-bottom-left-radius: calc(0.25rem - 1px); +} + +.card-deck { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; +} + +.card-deck .card { + margin-bottom: 15px; +} + +@media (min-width: 576px) { + .card-deck { + -ms-flex-flow: row wrap; + flex-flow: row wrap; + margin-right: -15px; + margin-left: -15px; + } + .card-deck .card { + display: -ms-flexbox; + display: flex; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + -ms-flex-direction: column; + flex-direction: column; + margin-right: 15px; + margin-bottom: 0; + margin-left: 15px; + } +} + +.card-group { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; +} + +.card-group .card { + margin-bottom: 15px; +} + +@media (min-width: 576px) { + .card-group { + -ms-flex-flow: row wrap; + flex-flow: row wrap; + } + .card-group .card { + -ms-flex: 1 0 0%; + flex: 1 0 0%; + margin-bottom: 0; + } + .card-group .card + .card { + margin-left: 0; + border-left: 0; + } + .card-group .card:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .card-group .card:first-child .card-img-top, + .card-group .card:first-child .card-header { + border-top-right-radius: 0; + } + .card-group .card:first-child .card-img-bottom, + .card-group .card:first-child .card-footer { + border-bottom-right-radius: 0; + } + .card-group .card:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .card-group .card:last-child .card-img-top, + .card-group .card:last-child .card-header { + border-top-left-radius: 0; + } + .card-group .card:last-child .card-img-bottom, + .card-group .card:last-child .card-footer { + border-bottom-left-radius: 0; + } + .card-group .card:only-child { + border-radius: 0.25rem; + } + .card-group .card:only-child .card-img-top, + .card-group .card:only-child .card-header { + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + } + .card-group .card:only-child .card-img-bottom, + .card-group .card:only-child .card-footer { + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + } + .card-group .card:not(:first-child):not(:last-child):not(:only-child) { + border-radius: 0; + } + .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-top, + .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom, + .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-header, + .card-group .card:not(:first-child):not(:last-child):not(:only-child) .card-footer { + border-radius: 0; + } +} + +.card-columns .card { + margin-bottom: 0.75rem; +} + +@media (min-width: 576px) { + .card-columns { + -webkit-column-count: 3; + column-count: 3; + -webkit-column-gap: 1.25rem; + column-gap: 1.25rem; + } + .card-columns .card { + display: inline-block; + width: 100%; + } +} + +/**************************************************************************** + * END BOOTSTRAP + ****************************************************************************/ + +.event-display { + height: 100%; + margin: 20px 0; +} + +.event-display-title { + margin: 10px 0 20px 10px; + height: 40px; +} + +.event { + margin: 0 1%; + padding: 20px; + background-color: rgba(237, 246, 253); + font-family: "Calisto MT Text"; + height: calc(100vh - 100px); + min-height: content; + position: relative; + border: 1px solid #0B5687; + box-shadow: 0 0 10px 0 rgb(11, 86, 135, 0.1) inset; +} + +.event-header, .event-body { + background-color: transparent; +} + +.event-header { + border-bottom: none; +} + +.event-title { + font-family: "Helvetica", sans-serif; + font-weight: 500; + font-size: 2.3em; + border-bottom: none; + margin: 10px 0; +} + +.event-image { + background-repeat: no-repeat; + background-size: cover; + background-position: top center; + height: 200px; + width: 100%; + border-radius: 7px; +} + +.edge-faded { + box-shadow: + inset 0 0 5px 0 rgba(237, 246, 253, 0.5), + inset 0 0 1px 0 rgba(237, 246, 253, 0.9), + inset 2px 2px 2px 0 rgba(237, 246, 253, 0.7), + inset -2px -2px 2px 0 rgba(237, 246, 253, 0.7), + inset 3px 3px 2px 0 rgba(237, 246, 253, 0.3), + inset -3px -3px 2px 0 rgba(237, 246, 253, 0.3); +} + +.event-info { + font-size: 140%; + font-weight: 300; + line-height: 110%; + font-family: "Helvetica", sans-serif; +} + +.event-description { + margin-top: 20px; + font-size: 1.1em; +} + +.event-link { + color: #356C5C; + font-size: 1.3em; + font-weight: bold; + font-family: "Helvetica", sans-serif; + position: absolute; + bottom: 15px; + right: 15px; +} diff --git a/website/templates/website/header_footer.html b/website/templates/website/header_footer.html index 94e7009..35eb40d 100644 --- a/website/templates/website/header_footer.html +++ b/website/templates/website/header_footer.html @@ -15,6 +15,7 @@ + {% block stylesheets %} {% endblock %} diff --git a/website/templates/website/index.html b/website/templates/website/index.html index edcc684..f532f08 100644 --- a/website/templates/website/index.html +++ b/website/templates/website/index.html @@ -58,9 +58,9 @@

We extend membership to the top third of d -
+
-
+

Upholding academic excellence

Upsilon Pi Epsilon is the first and only international honor society for the Computing Sciences. The UC Berkeley chapter, launched in 1995, honors the top tier of Computer Science students on campus.

@@ -97,34 +97,36 @@

Membership

{% if events %} -
-
-
-
Upcoming Events
-
-
-
-
-
- {% for event in events %} -
-

{{ event.name }}

-

Date: {{ event.start_timestamp|todate|date:"m/d/y" }}
Time: {{ event.start_timestamp|todate|date:"g:i A" }}
Location: {{ event.location }}

-
-
-
-

{{ event.name }}

-

{% autoescape off %} - {{ event.description }} - {% endautoescape %}

-
-
+ +
+
+

Upcoming Events

+
+
+ {% for event in events %} +
+
+
+

{{ event.name }}

+
+
+
+

Date: {{event.start_timestamp|todate|date:"l, M. jS"}}

+

Time: {{event.start_timestamp|todate|date:"g:i A"}}

+

Location: {{event.location}}

+

+ {% autoescape off %} + {{ event.description }} + {% endautoescape %} +

+ See Facebook event >
- {% endfor %}
+ {% endfor %}
-
+ + {% endif %}
diff --git a/website/views.py b/website/views.py index ef26e12..2cc96da 100644 --- a/website/views.py +++ b/website/views.py @@ -14,16 +14,27 @@ from datetime import datetime from datetime import timedelta import calendar +from upe_calendar.models import * +import time + +EVENT_LIMIT = 3 def index(request): template = loader.get_template('website/index.html') officers = UserProfile.objects.filter(user_type=3, approved=True) + events = Event.objects.filter() + events = events[:EVENT_LIMIT] + events = [event for event in events if event.start_timestamp > (time.time() + 60*60*2)] # context = RequestContext(request, { 'officers': officers }) # return HttpResponse(template.render(context)) - return render(request, 'website/index.html', { 'officers': officers }) + return render(request, 'website/index.html', { + 'officers': officers, + 'events': events, + 'cols_per_event': None if len(events) == 0 else int(12/len(events)) + }) def oh(request): return render(request, 'website/oh.html', {})