couleur ribbons: show global ribbons for current corporations

https://codepen.io/fiedl/pen/VwjZOWK https://trello.com/c/jGazxP6O/1494-bänder-verwaltung
fiedl · Oct 6, 2020 · 567ef63 · 567ef63
1 parent 24d707b
commit 567ef63
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/app/assets/stylesheets/bootstrap_layout.sass b/app/assets/stylesheets/bootstrap_layout.sass
@@ -5,6 +5,13 @@
  *    require_tree './bootstrap_layout'
  */
 
+// Top bar
+// Make it a little transparent in order for the top-right ribbon to be shown
+//
+#navbar-menu .navbar
+  opacity: 0.9
+  z-index: 1
+
 // Profile-avatar fix
 // https://github.com/tabler/tabler/issues/651
 //

diff --git a/app/assets/stylesheets/your_platform/couleur.sass b/app/assets/stylesheets/your_platform/couleur.sass
@@ -0,0 +1,24 @@
+// https://codepen.io/fiedl/pen/VwjZOWK
+// https://trello.com/c/jGazxP6O/1494
+
+#current_user_global_couleur_ribbons
+  overflow: hidden
+  position: absolute
+  right: 0
+  top: 0
+  height: 100%
+  width: 100%
+  z-index: -1
+  opacity: 0.5
+
+  .ribbon_rotate
+    transform: rotate(40deg)
+    transform-origin: top right
+    margin-left: -50%
+    margin-right: -50%
+    margin-top: 50%
+
+    .wrapper
+      transform: rotate(0deg)
+      overflow: initial
+      width: 100%
diff --git a/app/views/layouts/bootstrap.html.haml b/app/views/layouts/bootstrap.html.haml
@@ -61,6 +61,20 @@
           = render partial: 'layouts/navbar'
 
       #content.content
+        - if current_user && can?(:use, :corporation_couleur)
+          -#= cache [current_user, "#current_user_global_couleur_ribbons"] do
+          - Rack::MiniProfiler.step "#current_user_global_couleur_ribbons" do
+            #current_user_global_couleur_ribbons
+              .ribbon_rotate
+                - for corporation in current_user.sorted_current_corporations
+                  .mb-2
+                    - case current_user.current_status_in corporation
+                    - when "Hospitant"
+                      %vue_ribbon{':value': corporation.couleur_hospitanten.apparent_colors, height: "60px", width: "100%"}
+                    - when "Konkneipant"
+                      %vue_ribbon{':value': corporation.couleur_konkneipanten.apparent_colors, height: "60px", width: "100%"}
+                    - else
+                      %vue_ribbon{':value': corporation.couleur.apparent_colors, height: "60px", width: "100%"}
         .container-xl
           / Content here
           = render partial: 'shared/flashes'

diff --git a/app/vue/components/ribbon.vue b/app/vue/components/ribbon.vue
@@ -1,12 +1,12 @@
 <template lang="haml">
   %div
-    .wrapper.d-inline-block{':class': "round ? 'round' : ''"}
+    .wrapper.d-inline-block{':class': "round ? 'round' : ''", ':style': "'width: ' + (width || '5em') + '; height: ' + (height || '5em')"}
       .section{'v-for': "(color, index) in selected_colors", ':style': "'background-color: ' + color.hex + ';' + 'height: ' + color_section_height(index)"}
 </template>
 
 <script lang="coffee">
   Ribbon =
-    props: ['value', 'round']
+    props: ['value', 'round', 'width', 'height']
     data: ->
       selected_colors: []
       colors: [
@@ -52,8 +52,6 @@
 <style lang="sass">
   .wrapper
     overflow: hidden
-    width: 5em
-    height: 5em
     transform: rotate(36deg)
   .wrapper.round
     border-radius: 50px