[UI] Public adventures view (#4757)

Fixes #4604 **Info** - Public adventures are listed as cards - Each card contains basic information about the adventure. - creator, level, clones (# of times it's created), last update date, and tags - These are sorted by currenUser's adventures **Features and Todo** - Teachers can navigate to their adventures by clicking on the title or edit button. - Teachers can clone or view adventures of others - if they clone, a new copy of that adventure is created - the user gets a notification that cloning succeeded - the update is reflected by showing the newly cloned adventure only thus - the other teacher's adventure that's cloned now, won't be visible. - Teachers can use 3 filters: - Search - Language - Tags - [ ] Country? - [ ] User? - [ ] Level? - [ ] add tests - [ ] allow filtering through url
hedyorg · Dec 12, 2023 · c831922 · c831922
1 parent ddbe141
commit c831922
Show file tree

Hide file tree

Showing 61 changed files with 2,134 additions and 73 deletions.
diff --git a/app.py b/app.py
@@ -42,8 +42,8 @@
 from utils import dump_yaml_rt, is_debug_mode, load_yaml_rt, timems, version, strip_accents
 from website import (ab_proxying, achievements, admin, auth_pages, aws_helpers,
                      cdn, classes, database, for_teachers, s3_logger, parsons,
-                     profile, programs, querylog, quiz, statistics, surveys,
-                     translating, tags)
+                     profile, programs, querylog, quiz, statistics,
+                     translating, tags, surveys, public_adventures)
 from website.auth import (current_user, is_admin, is_teacher, is_second_teacher, has_public_profile,
                           login_user_from_token_cookie, requires_login, requires_login_redirect, requires_teacher,
                           forget_current_user)
@@ -2493,6 +2493,7 @@ def current_user_allowed_to_see_program(program):
 app.register_blueprint(statistics.StatisticsModule(DATABASE))
 app.register_blueprint(statistics.LiveStatisticsModule(DATABASE))
 app.register_blueprint(tags.TagsModule(DATABASE, ACHIEVEMENTS))
+app.register_blueprint(public_adventures.PublicAdventuresModule(DATABASE, ACHIEVEMENTS))
 app.register_blueprint(surveys.SurveysModule(DATABASE))
 
 

diff --git a/messages.pot b/messages.pot
@@ -146,6 +146,9 @@ msgstr ""
 msgid "adventure"
 msgstr ""
 
+msgid "adventure_cloned"
+msgstr ""
+
 msgid "adventure_duplicate"
 msgstr ""
 
@@ -227,6 +230,9 @@ msgstr ""
 msgid "amount_submitted"
 msgstr ""
 
+msgid "apply_filters"
+msgstr ""
+
 msgid "are_you_sure"
 msgstr ""
 
@@ -296,6 +302,10 @@ msgstr ""
 msgid "class_overview"
 msgstr ""
 
+msgid "clone"
+msgstr ""
+
+msgid "cloned_times"
 msgid "class_survey_description"
 msgstr ""
 
@@ -500,6 +510,9 @@ msgstr ""
 msgid "echo_out"
 msgstr ""
 
+msgid "edit_adventure"
+msgstr ""
+
 msgid "edit_code_button"
 msgstr ""
 
@@ -977,6 +990,9 @@ msgstr ""
 msgid "no_accounts"
 msgstr ""
 
+msgid "no_adventures_yet"
+msgstr ""
+
 msgid "no_certificate"
 msgstr ""
 
@@ -1205,6 +1221,9 @@ msgstr ""
 msgid "public"
 msgstr ""
 
+msgid "public_adventures"
+msgstr ""
+
 msgid "public_invalid"
 msgstr ""
 
@@ -1361,6 +1380,12 @@ msgstr ""
 msgid "select_adventures"
 msgstr ""
 
+msgid "select_lang"
+msgstr ""
+
+msgid "select_tag"
+msgstr ""
+
 msgid "self_removal_prompt"
 msgstr ""
 
@@ -1601,6 +1626,9 @@ msgstr ""
 msgid "title_programs"
 msgstr ""
 
+msgid "title_public-adventures"
+msgstr ""
+
 msgid "title_recover"
 msgstr ""
 

diff --git a/static/css/additional.css b/static/css/additional.css
@@ -197,6 +197,13 @@ body[dir='rtl'] #editor .ace_gutter-layer > * {
   right: 3px;
 }
 
+.card-container {
+  display: grid; 
+  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
+  grid-gap: 1.5rem;
+  justify-content: center;
+}
+
 .current {
   font-weight: bold;
   background-color: #edf2f7;

diff --git a/static/css/generated.full.css b/static/css/generated.full.css
@@ -2002,6 +2002,8 @@ code {
   bottom: -100%;
 }
 
+.-top-1 {
+  top: -0.25rem;
 .-inset-y-px {
   top: -1px;
   bottom: -1px;
@@ -5717,14 +5719,14 @@ code {
   margin-top: -2rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
 
+.mt-auto {
+  margin-top: auto;
+}
+
 .-ml-32 {
   margin-left: -8rem;
 }
@@ -15999,6 +16001,10 @@ code {
   grid-template-columns: none;
 }
 
+.grid-rows-\[1fr_100px\] {
+  grid-template-rows: 1fr 100px;
+}
+
 .grid-rows-1 {
   grid-template-rows: repeat(1, minmax(0, 1fr));
 }
@@ -25723,6 +25729,11 @@ code {
   border-color: rgb(154 230 180 / var(--tw-border-opacity));
 }
 
+.border-blue-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(154 230 180 / var(--tw-border-opacity));
+}
+
 .\!border-gray-400 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(203 213 224 / var(--tw-border-opacity)) !important;
@@ -141302,6 +141313,11 @@ code {
   padding-bottom: 3rem;
 }
 
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .px-16 {
   padding-left: 4rem;
   padding-right: 4rem;
@@ -143194,6 +143210,86 @@ code {
   letter-spacing: 0.05em;
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(72 187 120 / var(--tw-text-opacity));
+}
+
+.text-yellow-900 {
+  --tw-text-opacity: 1;
+  color: rgb(116 66 16 / var(--tw-text-opacity));
+}
+
+.text-yellow-500 {
+  --tw-text-opacity: 1;
+  color: rgb(236 201 75 / var(--tw-text-opacity));
+}
+
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(34 84 61 / var(--tw-text-opacity));
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(113 128 150 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(45 55 72 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(47 133 90 / var(--tw-text-opacity));
+}
+
+.text-pink-500 {
+  --tw-text-opacity: 1;
+  color: rgb(237 100 166 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(160 174 192 / var(--tw-text-opacity));
+}
+
+.text-blue-500 {
+  --tw-text-opacity: 1;
+  color: rgb(66 153 225 / var(--tw-text-opacity));
+}
+
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(44 82 130 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(26 32 44 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(247 250 252 / var(--tw-text-opacity));
+}
+
+.text-yellow-400 {
+  --tw-text-opacity: 1;
+  color: rgb(246 224 94 / var(--tw-text-opacity));
+}
+
 .tracking-widest {
   letter-spacing: 0.1em;
 }
@@ -193588,6 +193684,18 @@ code {
   outline-offset: 8px;
 }
 
+.outline-blue-400 {
+  outline-color: #63b3ed;
+}
+
+.outline-transparent {
+  outline-color: transparent;
+}
+
+.outline-current {
+  outline-color: currentColor;
+}
+
 .outline-black {
   outline-color: #000;
 }
@@ -214299,6 +214407,22 @@ code {
   transition-duration: 150ms;
 }
 
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-none {
+  transition-property: none;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -215449,6 +215573,20 @@ div[class^="ace_incorrect_hedy_code"] {
   opacity: 1;
 }
 
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:outline:hover {
+  outline-style: solid;
+}
+
+.hover\:outline-2:hover {
+  outline-width: 2px;
+}
+
 .focus\:bg-blue-100:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(235 248 255 / var(--tw-bg-opacity));
@@ -215700,6 +215838,10 @@ div[class^="ace_incorrect_hedy_code"] {
   .sm\:w-5\/12 {
     width: 41.666667%;
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
 }
 
 @media (min-width: 768px) {

diff --git a/static/js/index.ts b/static/js/index.ts
@@ -23,4 +23,5 @@ export * from './browser-helpers/unsaved-changes';
 export * from './initialize';
 export * from './debugging';
 export { getPreviousAndNext } from './tabs';
-export { loadParsonsExercise } from './parsons';
+export * from './public-adventures';
+export { loadParsonsExercise } from './parsons';