make mentoring cards more like others

content/activities/rladies-blogs/index.en.md

@@ -5,9 +5,4 @@ type: "rladies-blogs"
 
 Curated list of awesome blogs by R-Ladies, inspired by
 
-<<<<<<< HEAD
-{{< twitter 1362021673239785473 >}}
-
-=======
 {{< twitter id="1362021673239785473" user="RLadiesGlobal" >}}
->>>>>>> main

data/mentoring/cotonou.json

@@ -1,11 +1,11 @@
 
   {
     "img": "cotonou.png",
-    "url": "https://www.google.com",
+    "url": "",
     "statement": "I asked the speaker on that day to share her experience from choosing her topic to presenting! She ecstatically shared that and we immediately got volunteers for the next meetup",
     "year": "2019",
-    "name": "Nadeja Sero",
-    "chapter": "R-Ladies Cotonou",
-    "twitter": "RLadiesCtn"
+    "mentee": "Nadeja Sero",
+    "mentor": "",
+    "chapter": "R-Ladies Cotonou"
   }
 

themes/hugo-rladies/assets/style.scss

@@ -565,8 +565,6 @@ pre {
   padding-bottom:.2rem;
   z-index: 99;
   text-align: right;
-
-
 }
 
 
@@ -647,7 +645,6 @@ pre {
   .card-expand-content {
     padding: 10px;
   }
-
 }
 
 .card-medium {
@@ -657,17 +654,25 @@ pre {
   .card-expand-content {
     padding: 20px;
   }
-
 }
 
 .card-large {
   height: 470px;
-  min-width: 200px;
+  min-width: 250px;
   .card-expand-content {
     padding: 30px;
   }
 }
 
+.card-wide {
+  height: 370px;
+  min-width: 250px;
+
+  .card-expand-content {
+    padding: 10px;
+  }
+}
+
 .card-expand {
   position: relative;
   box-shadow: $box-shadow-sm;
@@ -676,6 +681,20 @@ pre {
   margin-bottom: 10px;
   font-size: 14px;
 
+    blockquote:before {
+     content: "\f10d";
+     font-family: FontAwesome;
+     color: $primary;
+     margin-right: 4px
+    }
+
+  blockquote:after {
+     content: "\f10e";
+     font-family: FontAwesome;
+     color: $primary;
+     margin-left: 4px
+  }
+
  img {
     display: block;
     width: 100%;
@@ -732,6 +751,10 @@ pre {
   opacity: 1 !important;
 }
 
+.card-expand-animate {
+  display: none;
+}
+
 .card-expand-category {
   position: absolute;
   top: -30px;
@@ -761,7 +784,6 @@ pre {
   font-size: 14px;
   color: darken($secondary, 30%);
   line-height: 1.2em;
-  display: none;
 }
 
 .card-expand-up-title {

themes/hugo-rladies/layouts/mentoring/single.html

@@ -1,11 +1,41 @@
 {{ define "main" }}
-    <div class="container" id="mentoring">
-      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3">
+  {{ $data := newScratch }}
+
+	{{ .Content }}
+  <div class="container expand-grid" id="rladies-blogs">
+    <ul class="justify-content-center full-width row row-xl-2 row-lg-3 row-md-4 row-sm-6 row-9">
       {{ $mentoring := ( .Scratch.Get "mentoring" ) }}
       {{ range $name := $.Scratch.Get "ment" | shuffle }}
         {{ $m := index $mentoring $name }}
-        {{ partial "mentoring/li.html" $m }}
+
+        {{ $data.Set "content" "" }}
+        {{ with $m.statement }} 
+          {{ $data.Set "content" "<blockquote>" }}
+          {{ $data.Add "content" . }}
+          {{ $data.Add "content" "</blockquote>" }}
+        {{ end }}
+        {{ with $m.url }}
+          {{ $data.Add "content" (partial "funcs/read_more.html" . ) }}
+        {{ end }}
+
+        {{ with $m.mentee }}
+          {{ $data.Set "foot" (printf "<p>Mentee: %s</p>" . ) }}
+        {{ end }}
+        {{ with $m.mentor }}
+          {{ $data.Add "foot" (printf "<p>Mentor: %s</p>" . ) }}
+        {{ end }}
+
+        {{ $data.Set "img" "" }}
+        {{ with resources.GetMatch (printf "mentoring/%s" $m.img ) }}
+          {{ $img := . }}
+          {{ $img := $img.Fit "400x800" }}
+          {{ $data.Set "img" $img.Permalink }}
+        {{ end }}
+
+        {{ partial "funcs/card-expand.html" (dict "title" $m.chapter "img" ($data.Get "img") "size" "wide" "descr" ($data.Get "content") "category" $m.year "anim" false "foot" ( $data.Get "foot") "footcol" 2 )}}
       {{ end }}
-    </div>
+    </ul>
   </div>
 {{ end }}
+
+

themes/hugo-rladies/layouts/partials/footer/scripts.html

@@ -11,7 +11,7 @@
 
 <script>
   $('.card-expand').hover(function() {
-    $(this).find('.card-expand-description').stop().animate({
+    $(this).find('.card-expand-animate').stop().animate({
         height: "toggle",
         opacity: "toggle"
       }, 300);

themes/hugo-rladies/layouts/partials/funcs/card-expand.html

@@ -2,27 +2,26 @@
 {{ $image := $image | absURL  }}
 {{ $size := .size | default "medium" }}
 {{ $footcol := .footcol | default 1 }}
-{{ $id := .id }}
+{{ $anim := .anim | default true }}
 
-
-<li class="card-expand rounded card-{{ $size }} card" id="{{ $id | urlize }}">
+<li class="card-expand rounded card-{{ $size }} card" {{ with .id }} id="{{ . | urlize }}" {{ end }} >
   <div class="card-expand-img rounded-top">
     <img src="{{ $image }}"/>
   </div>
   <div class="card-expand-content">
     {{ with .category }}
-      <div class="card-expand-category rounded-right">{{ . }}</div>
+      <div class="card-expand-category rounded-right">{{ . | safeHTML }}</div>
     {{ end }}
       <h4 class="card-expand-title">
-        <a href="#{{ .id }}" class="name">{{ .title | safeHTML }}</a>
+         <a {{ with .id }} href="#{{ . }}" {{ end }} class="name">{{ .title | safeHTML }}</a>
       </h4>
     {{ with .subtitle }}
       <h5 class="card-expand-subtitle">
         {{ . | safeHTML }}
       </h5>
     {{ end }} 
     {{ with .descr }}
-      <div class="card-expand-description">
+      <div class="card-expand-description {{ if $anim }} card-expand-animate {{ end }}">
         {{ . | safeHTML }} 
       </div>
     {{ end }}

themes/hugo-rladies/layouts/partials/funcs/read_more.html

@@ -0,0 +1,9 @@
+{{ $data := newScratch }}
+
+{{ $data.Set "return" "<div class=\"read-more\">" }}
+{{ $data.Add "return" (printf "<a href=\"%s\" class=\"read-more-link\">" . ) }}
+{{ $data.Add "return" ( i18n "read_more" ) }}
+{{ $data.Add "return" "</a></div>" }}
+
+{{ return ( $data.Get "return") }}
+

themes/hugo-rladies/layouts/partials/post/summary.html

@@ -13,8 +13,6 @@ <h4 class="entry-title">
 	</header>
 	<div class="entry-content">
 		{{ .Summary }}
-	  <div class="read-more">
-      <a href="{{ .RelPermalink }}" class="read-more-link">{{ i18n "read_more" }}</a> 
-    </div>
+		{{ partial "funcs/read_more.html" .RelPermalink | safeHTML }}
 	</div>
 </article>