Merge pull request #399 from MadanBhandari/issue/387

Problem: Card title & description is limited #387
EmurgoHK · Nov 1, 2018 · dfd31ef · dfd31ef
2 parents 1e3799d + e630ae1
commit dfd31ef
Show file tree

Hide file tree

Showing 19 changed files with 200 additions and 324 deletions.
diff --git a/imports/ui/helpers/handlebars-helpers.js b/imports/ui/helpers/handlebars-helpers.js
@@ -9,7 +9,7 @@ import CryptoJS from 'crypto-js'
 Template.registerHelper('SubsCacheReady', () => Object.keys(SubsCache.cache).map(x => SubsCache.cache[x].ready()).reduce((x1, x2) => x1 && x2, true))
 
 Template.registerHelper('isModerator', () => isModerator(Meteor.userId()))
-Template.registerHelper('LimitChars', (val) => val&&val.length>50?val.slice(0,50)+' ... ':val )
+Template.registerHelper('LimitChars', (val) => val&&val.length>100?val.slice(0,100)+' ... ':val )
 
 Template.registerHelper('md', content => {
     return  this.innerHTML = marked(content || '')

diff --git a/imports/ui/shared/eventList/eventList.html b/imports/ui/shared/eventList/eventList.html
@@ -4,20 +4,10 @@
         <div class="card event">
           <div class="card-body">
             <p class="home-label bg-warning">Event</p>
-            {{#if canEdit}}
-            <div class="news-settings float-right dropdown">
-              <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
-              <div class="dropdown-menu">
-                <a class="dropdown-item" id="js-edit" href="/events/{{_id}}/edit"><i class="icon-pencil"></i> Edit </a>
-                <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i> Delete </a>
-              </div>
-            </div>
-            {{/if}}
             <p class="event-label {{eventLabel}}">{{eventLabel}}</p>
             <h4 class="card-title">
               <a href="/events/{{slug}}" title="{{headline}}">{{headline}}</a>
             </h4>
-            <br>
             <p class="card-text">
               {{#if isEventUpcoming start_date}} 
                 <p>Starts {{showTimeAgoTimestamp start_date}}</p> 
@@ -32,7 +22,7 @@ <h4 class="card-title">
             <p class="location">
               <i class="icon-location-pin"></i> <a target="_blank" href="https://www.google.com/maps/place/{{location}}/">{{location}}</a>
             </p>
-            {{> flagItem item="event"}}
+            {{> flagItem item="event" edit=editURL _id=this._id}}
           </div>
         </div>
       {{/each}}
@@ -42,20 +32,10 @@ <h4 class="card-title">
           <div class="{{cardWrapperClasses}}">
             <div class="card event">
               <div class="card-body">
-                {{#if canEdit}}
-                <div class="news-settings float-right dropdown">
-                  <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
-                  <div class="dropdown-menu">
-                    <a class="dropdown-item" id="js-edit" href="/events/{{_id}}/edit"><i class="icon-pencil"></i> Edit </a>
-                    <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i> Delete </a>
-                  </div>
-                </div>
-                {{/if}}
                 <p class="event-label {{eventLabel}}">{{eventLabel}}</p>
                 <h4 class="card-title">
                   <a href="/events/{{slug}}" title="{{headline}}">{{headline}}</a>
                 </h4>
-                <br>
                 <p class="card-text">
                   {{#if isEventUpcoming start_date}} 
                     <p>Starts {{showTimeAgoTimestamp start_date}}</p> 
@@ -70,7 +50,7 @@ <h4 class="card-title">
                 <p class="location">
                   <i class="icon-location-pin"></i> <a target="_blank" href="https://www.google.com/maps/place/{{location}}/">{{location}}</a>
                 </p>
-                {{> flagItem item="event"}}
+                {{> flagItem item="event" edit=editURL _id=this._id}}
               </div>
             </div>
           </div>

diff --git a/imports/ui/shared/eventList/eventList.js b/imports/ui/shared/eventList/eventList.js
@@ -20,8 +20,11 @@ Template.eventList.helpers({
   limitChars(val) {
     return val && val.length > 50 ? val.slice(0, 50) + " ... " : val;
   },
-  canEdit() {
-    return this.createdBy === Meteor.userId();
+  editURL() {
+    if(this.createdBy === Meteor.userId()){
+      return `/events/${this._id}/edit`
+    }
+    return false
   },
   eventLabel() {
     let now = moment();

diff --git a/imports/ui/shared/eventList/eventList.scss b/imports/ui/shared/eventList/eventList.scss
@@ -20,12 +20,10 @@
 
 .card.event {
   .card-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    font-size: 1em;
   }
   .card-text {
-    height: 3em;
+    height: 4em;
   }
   .location {
     height: 2em;

diff --git a/imports/ui/shared/flagItem/flagItem.html b/imports/ui/shared/flagItem/flagItem.html
@@ -2,7 +2,12 @@
   <div class="dropup flagItem">
     <i class="fas fa-ellipsis-h dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
     <div class="dropdown-menu">
-      <a class="dropdown-item flag-{{item}}" href="#" title="Report"><i class="icon-flag"></i> Report</a>
+      {{#if edit}}
+        <a class="dropdown-item" id="js-edit" href={{edit}}><i class="icon-pencil"></i>Edit</a>
+        <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i>Delete</a>
+      {{else}}
+        <a class="dropdown-item flag-{{item}}" href="#" title="Report"><i class="icon-flag"></i> Report</a>
+      {{/if}}
     </div>
   </div>
 </template>
diff --git a/imports/ui/shared/learningResourceList/learningResourceList.html b/imports/ui/shared/learningResourceList/learningResourceList.html
@@ -1,60 +1,34 @@
 <template name="learningResourceList">
-        {{#if isHome}}
-            {{#each learningResources}}
-                <div class="card learningResource">
-                    <p class="home-label bg-success">Learn</p>
-                    <div class="card-body">
-                        {{#if canEdit}}
-                        <div class="news-settings float-right dropdown">
-                            <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
-                                aria-expanded="false"></i>
-                            <div class="dropdown-menu">
-                                <a class="dropdown-item" id="js-edit" href="/learn/{{slug}}/edit"><i class="icon-pencil"></i>
-                                    Edit</a>
-                                <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i>
-                                    Delete</a>
-                            </div>
-                        </div>
-                        {{/if}}
-
-                        <h4 class="card-title">
-                            <a href="/learn/{{slug}}" title="{{title}}">{{title}}</a>
-                        </h4>
-                        <p class="card-text">{{limitChars summary}}</p>
-                        <hr />
-                        {{> flagItem item="learn"}}
-                    </div>
-                </div>
-            {{/each}}
-        {{else}}
-            <div class="{{containerClasses}}">
-                {{#each learningResources}}
-                <div class="{{cardWrapperClasses}}">
-                    <div class="card learningResource">
-                        <div class="card-body">
-                            {{#if canEdit}}
-                            <div class="news-settings float-right dropdown">
-                                <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
-                                    aria-expanded="false"></i>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" id="js-edit" href="/learn/{{slug}}/edit"><i class="icon-pencil"></i>
-                                        Edit</a>
-                                    <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i>
-                                        Delete</a>
-                                </div>
-                            </div>
-                            {{/if}}
-
-                            <h4 class="card-title">
-                                <a href="/learn/{{slug}}" title="{{title}}">{{title}}</a>
-                            </h4>
-                            <p class="card-text">{{limitChars summary}}</p>
-                            <hr />
-                            {{> flagItem item="learn"}}
-                        </div>
-                    </div>
-                </div>
-                {{/each}}
+  {{#if isHome}}
+    {{#each learningResources}}
+      <div class="card learningResource">
+        <p class="home-label bg-success">Learn</p>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="/learn/{{slug}}" title="{{title}}">{{title}}</a>
+          </h4>
+          <p class="card-text">{{limitChars summary}}</p>
+          <hr />
+          {{> flagItem item="learn" edit=editURL _id=this._id}}
+        </div>
+      </div>
+    {{/each}}
+  {{else}}
+    <div class="{{containerClasses}}">
+      {{#each learningResources}}
+        <div class="{{cardWrapperClasses}}">
+          <div class="card learningResource">
+            <div class="card-body">
+              <h4 class="card-title">
+                <a href="/learn/{{slug}}" title="{{title}}">{{title}}</a>
+              </h4>
+              <p class="card-text">{{limitChars summary}}</p>
+              <hr />
+              {{> flagItem item="learn" edit=editURL _id=this._id}}
             </div>
-        {{/if}}
-    </template>
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  {{/if}}
+</template>
diff --git a/imports/ui/shared/learningResourceList/learningResourceList.js b/imports/ui/shared/learningResourceList/learningResourceList.js
@@ -19,8 +19,11 @@ Template.learningResourceList.helpers({
   cardWrapperClasses() {
     return Template.parentData().cardWrapperClass || "";
   },
-  canEdit: function() {
-    return this.createdBy === Meteor.userId();
+  editURL() {
+    if(this.createdBy === Meteor.userId()){
+      return `/learn/${this.slug}/edit`
+    }
+    return false
   },
   limitChars(val) {
     return val && val.length > 50 ? val.slice(0, 50) + " ... " : val;

diff --git a/imports/ui/shared/learningResourceList/learningResourceList.scss b/imports/ui/shared/learningResourceList/learningResourceList.scss
@@ -1,10 +1,8 @@
 .card.learningResource {
   .card-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    font-size: 1em;
   }
   .card-text {
-    height: 3em;
+    height: 4em;
   }
 }
diff --git a/imports/ui/shared/projectList/projectList.html b/imports/ui/shared/projectList/projectList.html
@@ -1,79 +1,50 @@
 <template name="projectList">
-        {{#if isHome}}
-            {{#each projects}}
-                <div class="card project">
-                    <p class="home-label bg-primary">Project</p>
-                    <div class="card-body">
-                        {{#if canEdit}}
-                        <div class="news-settings float-right dropdown">
-                            <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
-                            <div class="dropdown-menu">
-                                <a class="dropdown-item" id="js-edit" href="/projects/{{_id}}/edit"><i class="icon-pencil"></i>
-                                    Edit</a>
-                                <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i>
-                                    Delete</a>
-                            </div>
-                        </div>
-                        {{/if}}
-
-                        <h4 class="card-title">
-                            <a href="/projects/{{slug}}" title="{{headline}}">{{headline}}</a>
-                        </h4>
-                        <br>
-                        <p class="card-text">
-                            {{limitChars description}}
-                        </p>
-                        <hr>
-                        {{#if github_url}}
-                        <a href="{{github_url}}" class="github card-link"><i class="fab fa-github fa-lg"></i></a>
-                        {{else}}
-                        <a href="#" class="no-github card-link"><img style="max-width: 1.5em; margin-top: -.125em;"
-                                src="/img/no-github.png" alt="no github repo"></a>
-                        {{/if}}
-                        <a href="{{website}}" title="Go to {{website}}" class="website card-link"><i class="fas fa-external-link-alt fa-lg"></i></a>
-                        {{> flagItem item="project"}}
-                    </div>
-                </div>
-            {{/each}}
-        {{else}}
-            <div class="{{containerClasses}}">
-                {{#each projects}}
-                <div class="{{cardWrapperClasses}}">
-                    <div class="card project">
-                        <div class="card-body">
-                            {{#if canEdit}}
-                            <div class="news-settings float-right dropdown">
-                                <i class="icon-settings dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
-                                <div class="dropdown-menu">
-                                    <a class="dropdown-item" id="js-edit" href="/projects/{{_id}}/edit"><i class="icon-pencil"></i>
-                                        Edit</a>
-                                    <a class="dropdown-item text-danger" id="js-remove" href="#"><i class="icon-trash text-danger"></i>
-                                        Delete</a>
-                                </div>
-                            </div>
-                            {{/if}}
-
-                            <h4 class="card-title">
-                                <a href="/projects/{{slug}}" title="{{headline}}">{{headline}}</a>
-                            </h4>
-                            <br>
-                            <p class="card-text">
-                                {{limitChars description}}
-                            </p>
-                            <hr>
-                            {{#if github_url}}
-                            <a href="{{github_url}}" class="github card-link"><i class="fab fa-github fa-lg"></i></a>
-                            {{else}}
-                            <a href="#" class="no-github card-link"><img style="max-width: 1.5em; margin-top: -.125em;"
-                                    src="/img/no-github.png" alt="no github repo"></a>
-                            {{/if}}
-                            <a href="{{website}}" title="Go to {{website}}" class="website card-link"><i class="fas fa-external-link-alt fa-lg"></i></a>
-                            {{> flagItem item="project"}}
-                        </div>
-                    </div>
-                </div>
-                {{/each}}
+  {{#if isHome}}
+    {{#each projects}}
+      <div class="card project">
+        <p class="home-label bg-primary">Project</p>
+        <div class="card-body">
+          <h4 class="card-title">
+            <a href="/projects/{{slug}}" title="{{headline}}">{{headline}}</a>
+          </h4>
+          <p class="card-text">
+            {{limitChars description}}
+          </p>
+          <hr>
+          {{#if github_url}}
+            <a href="{{github_url}}" class="github card-link"><i class="fab fa-github fa-lg"></i></a>
+          {else}}
+            <a href="#" class="no-github card-link"><img style="max-width: 1.5em; margin-top: -.125em;" src="/img/no-github.png" alt="no github repo"></a>
+          {{/if}}
+          <a href="{{website}}" title="Go to {{website}}" class="website card-link"><i class="fas fa-external-link-alt fa-lg"></i></a>
+          {{> flagItem item="project" edit=editURL _id=this._id}}
+        </div>
+      </div>
+    {{/each}}
+    {{else}}
+      <div class="{{containerClasses}}">
+        {{#each projects}}
+          <div class="{{cardWrapperClasses}}">
+            <div class="card project">
+              <div class="card-body">
+                <h4 class="card-title">
+                  <a href="/projects/{{slug}}" title="{{headline}}">{{headline}}</a>
+                </h4>
+                <p class="card-text">
+                  {{limitChars description}}
+                </p>
+                <hr>
+                {{#if github_url}}
+                <a href="{{github_url}}" class="github card-link"><i class="fab fa-github fa-lg"></i></a>
+                {{else}}
+                <a href="#" class="no-github card-link"><img style="max-width: 1.5em; margin-top: -.125em;" src="/img/no-github.png" alt="no github repo"></a>
+                {{/if}}
+                <a href="{{website}}" title="Go to {{website}}" class="website card-link"><i class="fas fa-external-link-alt fa-lg"></i></a>
+                {{> flagItem item="project" edit=editURL _id=this._id}}
+              </div>
             </div>
-        {{/if}}
-
-    </template>
+          </div>
+        {{/each}}
+      </div>
+  {{/if}}
+</template>
diff --git a/imports/ui/shared/projectList/projectList.js b/imports/ui/shared/projectList/projectList.js
@@ -21,8 +21,11 @@ Template.projectList.helpers({
   cardWrapperClasses() {
     return Template.parentData().cardWrapperClass || "";
   },
-  canEdit() {
-    return this.createdBy === Meteor.userId();
+  editURL() {
+    if(this.createdBy === Meteor.userId()){
+      return `/projects/${this._id}/edit`
+    }
+    return false
   },
   limitChars(val) {
     return val && val.length > 50 ? val.slice(0, 50) + " ... " : val;
@@ -62,7 +65,6 @@ Template.projectList.events({
   },
   "click #js-remove": function(event, _) {
     event.preventDefault();
-
     swal({
       text: `Are you sure you want to remove this Project? This action is not reversible.`,
       type: "warning",