Merge pull request #174 from owddm/feat/image-explainer

Photo Explainer
owddm · Jun 20, 2023 · c450427 · c450427
2 parents 34a0671 + a69e2c3
commit c450427
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 20 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -51,6 +51,7 @@
 	--color-bg-back: #F1F0F0;
 	--color-bg-front: #fff;
 	--space: .75rem;
+  --space-small: .5rem;
 	--radius: .5rem;
 
 	--border: 1px solid var(--color-gray);
@@ -119,6 +120,61 @@ h2 {
 	border-bottom: var(--_border);
 }
 
+.gallery-container div, h2,
+.explainer {
+  border-radius: var(--radius);
+}
+
+
+.gallery-container h2,
+.explainer {
+  background: var(--color-bg-back);
+  font-size: 1em;
+}
+
+.explainer {
+  margin: 0 var(--space) var(--space-small) var(--space);
+  padding: 0.5rem 1rem;
+}
+.explainer summary {
+  display: flex;
+  user-select: none;
+  cursor: pointer;
+  opacity: 0.5;
+  width: 100%;
+  justify-content: space-between;
+}
+.explainer ul {
+  padding-inline-start: 1rem;
+}
+.explainer li {
+  margin-bottom: 0.5rem;
+}
+.explainer summary:hover {
+  opacity: 1;
+}
+.explainer[open] summary {
+  opacity: 1;
+  margin-bottom: .5rem;
+}
+.explainer[open] summary::after {
+  content: "×";
+}
+.explainer summary abbr {
+  text-decoration: none;
+}
+
+.gallery-container h2 {
+  display: inline-block;
+  line-height: 1.2;
+  height: 200px;
+  max-width: 300px;
+  margin: 0;
+  padding: 0;
+	--title-border: 0;
+  --title-underline: 0;
+}
+
 p {
 	margin: 0;
 }
@@ -303,6 +359,7 @@ main {
 
 .event-header h2 {
 	--title-border: 0;
+  --title-underline: 0;
 }
 .event-header button {
 	--button-bg: transparent;

diff --git a/components/ImageContainer.vue b/components/ImageContainer.vue
@@ -147,13 +147,18 @@ div {
 }
 
 .gallery-container {
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--space-small);
   margin: 0 var(--space);
 }
 
+.img-container-margin {
+  max-width: 100%;
+  overflow: auto;
+  position: relative;
+  border-radius: var(--radius);
+}
 .img-container {
   width: 10rem;
   height: 10rem;
@@ -165,26 +170,11 @@ div {
 img {
   margin-top: auto;
   margin-bottom: auto;
-  border-radius: var(--radius);
 }
 
 img:hover {
   box-shadow: 0 0 150px 5px #aab6bd;
 }
-
-div, h2 {
-  border-radius: 10px;
-}
-
-h2 {
-  display: inline-block;
-  background: #f0f0f0;
-  font-size: 1em;
-  line-height: 1.2;
-  height: 200px;
-  margin: 0;
-  max-width: 300px;
-}
 .content, .date {
   display: block;
   margin: 1em;

diff --git a/pages/photos.vue b/pages/photos.vue
@@ -1,5 +1,15 @@
 <template>
   <div class="photos-container">
+    <details class="explainer">
+      <summary><abbr title="Information">ⓘ Information</abbr></summary>
+      <ul>
+        <li>All photos here have been taken by community members and sent in either through our <a href="https://discord.com/channels/1034792577293094972/1077517983439654962">#event-photos</a>
+      channel on discord or through the Meetup page.</li>
+        <li>All photos are published under the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons BY-NC-SA license</a>.</li>
+        <li>If you want a photo of you removed from the page, or if you have any other issues with a photo on this page, please let us know through → <a href="https://github.com/owddm/public/issues/new">a new GitHub issue</a>.</li>
+        <li>If you use any photo of this page, we request you to follow the github repository and also remove any photo if a member is uncomfortable with it.</li>
+      </ul>
+    </details>
     <ImageContainer galleryID="full-gallery" :key="update" :groups="groups" />
   </div>
 </template>
@@ -16,9 +26,6 @@ const groups = computed<Group[]>(() => {
 </script>
 
 <style scoped>
-.photos-container {
-  margin-top: 2rem;
-}
 
 @media screen and (orientation: landscape) {
   .photos-container {