diff options
| -rwxr-xr-x | public/css/style.css | 16 | ||||
| -rwxr-xr-x | views/event.handlebars | 143 |
2 files changed, 87 insertions, 72 deletions
diff --git a/public/css/style.css b/public/css/style.css index 4085875..e55f07a 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -115,6 +115,11 @@ body, html { text-transform:capitalize; } +#eventActions { + padding-left: 0; + margin-top: 1rem; +} + /* .location, .eventLink { display: flex; @@ -162,10 +167,6 @@ body, html { margin-left: 5px; } -.eventInformationAction:not(#copyEventLink) { - margin-top: 0.25rem; -} - .commentContainer { background: #fafafa; border-radius: 5px; @@ -308,6 +309,13 @@ body, html { } } +@media (min-width: 1120px) { + #eventActions { + margin-top: 0; + padding-left: 1rem; + } +} + @media (min-width: 577px) { #sidebar { border-right: 2px solid #e0e0e0; diff --git a/views/event.handlebars b/views/event.handlebars index 70c4018..7a57783 100755 --- a/views/event.handlebars +++ b/views/event.handlebars @@ -8,85 +8,92 @@ <h3 id="eventName">{{eventData.name}}</h3> </div> {{#if editingEnabled}} - <div class="col-lg-2 ml-2 edit-buttons"> + <div class="col-lg-3 ml-2 edit-buttons"> <div class="btn-group" role="group" aria-label="Event controls"> - <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i></button> - <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button> + <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" {{#if eventHasConcluded}}disabled{{/if}}><i class="fas fa-edit"></i> Edit</button> + <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete</button> </div> </div> {{/if}} </div> -<div class="card mt-4 mb-4"> - <div class="card-body"> - <ul class="fa-ul eventInformation"> - <li> - <span class="fa-li"> - <i class="fas fa-map-marker-alt"></i> - </span> - {{eventData.location}}<br /> - <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm"> - <i class="fas fa-map-marked"></i> Show on Google Maps - </a> - - <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="eventInformationAction btn btn-outline-secondary btn-sm"> - <i class="fas fa-map-marked"></i> Show on OpenStreetMap - </a> - </li> - <li> - <span class="fa-li"> - <i class="fas fa-fw fa-calendar-day"></i> - </span> - {{{displayDate}}} - <br> - <span class="text-muted"> - {{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}} - </span> - <br /> - <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="eventInformationAction btn btn-outline-secondary btn-sm"> +<div class="container my-4 pr-0"> + <div class="row"> + <div class="col-lg-9 card"> + <div class="card-body"> + <ul class="fa-ul eventInformation"> + <li> + <span class="fa-li"> + <i class="fas fa-map-marker-alt"></i> + </span> + {{eventData.location}} + </li> + <li> + <span class="fa-li"> + <i class="fas fa-fw fa-calendar-day"></i> + </span> + {{{displayDate}}} + <br> + <span class="text-muted"> + {{#if eventHasBegun}}{{#unless eventHasConcluded}}Started {{else}}Ended {{/unless}}{{/if}}{{fromNow}} + </span> + </li> + {{#if eventHasHost}} + <li> + <span class="fa-li"> + <i class="fas fa-fw fa-user-circle"></i> + </span> + <span class="text-muted">Hosted by</span> {{eventData.hostName}} + </li> + {{/if}} + {{#if eventData.eventGroup}} + <li> + <span class="fa-li"> + <i class="fas fa-fw fa-calendar-alt"></i> + </span> + <span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a> + </li> + {{/if}} + {{#if eventData.url}} + <li> + <span class="fa-li"> + <i class="fas fa-fw fa-link"></i> + </span> + <a href="{{eventData.url}}"> + {{eventData.url}} + </a> + </li> + {{/if}} + <li> + <span class="fa-li"> + <i class="fas fa-fw fa-share-square"></i> + </span> + <a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a> + <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}"> + <i class="fas fa-copy"></i> Copy + </button> + </li> + </ul> + </div> + </div> + <div class="col-lg-3" id="eventActions"> + <aside class="btn-group-vertical d-flex" role="group" aria-label="Event actions"> + <a href="http://www.google.com/calendar/event?action=TEMPLATE&dates={{parsedStart}}%2F{{parsedEnd}}&text={{escapedName}}&location={{parsedLocation}}&ctz={{timezone}}" class="btn btn-outline-secondary btn-sm"> <i class="far fa-calendar-plus"></i> Add to Google Calendar </a> - <button type="button" id="exportICS" class="eventInformationAction btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}"> + <button type="button" id="exportICS" class="btn btn-outline-secondary btn-sm" data-event-id="{{eventData.id}}"> <i class="fas fa-download"></i> Export as ICS </button> - </li> - {{#if eventHasHost}} - <li> - <span class="fa-li"> - <i class="fas fa-fw fa-user-circle"></i> - </span> - <span class="text-muted">Hosted by</span> {{eventData.hostName}} - </li> - {{/if}} - {{#if eventData.eventGroup}} - <li> - <span class="fa-li"> - <i class="fas fa-fw fa-calendar-alt"></i> - </span> - <span class="text-muted">Part of</span> <a href="/group/{{eventData.eventGroup.id}}">{{eventData.eventGroup.name}}</a> - </li> - {{/if}} - {{#if eventData.url}} - <li> - <span class="fa-li"> - <i class="fas fa-fw fa-link"></i> - </span> - <a href="{{eventData.url}}"> - {{eventData.url}} - </a> - </li> - {{/if}} - <li> - <span class="fa-li"> - <i class="fas fa-fw fa-share-square"></i> - </span> - <a href="https://gath.io/{{eventData.id}}">gath.io/{{eventData.id}}</a> - <button type="button" id="copyEventLink" class="eventInformationAction btn btn-outline-secondary btn-sm" data-clipboard-text="https://gath.io/{{eventData.id}}"> - <i class="fas fa-copy"></i> Copy - </button> - </li> - </ul> + <a target="_blank" href="http://maps.google.com/?q={{parsedLocation}}" class="btn btn-outline-secondary btn-sm"> + <i class="fas fa-map-marked"></i> Show on Google Maps + </a> + <a target="_blank" href="https://www.openstreetmap.org/search?query={{parsedLocation}}" class="btn btn-outline-secondary btn-sm"> + <i class="fas fa-map-marked"></i> Show on OpenStreetMap + </a> + </aside> + </div> </div> </div> + {{#if eventHasConcluded}} <div class="alert alert-warning mb-4" role="alert"> This event has concluded. It can no longer be edited, and will be automatically deleted <span class="daysToDeletion"></span>. |