github.com/bitcubate/cryptojournal@v1.2.5-0.20171102134152-f578b3d788ab/src/users/views/show.html.got (about) 1 <div class="mdl-grid"> 2 <div class="mdl-cell mdl-cell--3-col"> 3 4 <!-- Image card --> 5 <style> 6 .demo-card-image.mdl-card { 7 width: 256px; 8 height: 256px; 9 background: url('{{getimg .user.Email}}') center / cover; 10 } 11 .demo-card-image > .mdl-card__actions { 12 height: 52px; 13 padding: 16px; 14 background: rgba(0, 0, 0, 0.2); 15 } 16 .demo-card-image__filename { 17 color: #fff; 18 font-size: 14px; 19 font-weight: 500; 20 } 21 </style> 22 23 <div class="demo-card-image mdl-card mdl-shadow--2dp"> 24 <div class="mdl-card__title mdl-card--expand"></div> 25 <div class="mdl-card__actions"> 26 <span class="demo-card-image__filename"></span> 27 </div> 28 </div> 29 30 </div> 31 32 <div class="mdl-cell mdl-cell--9-col"> 33 34 35 <!-- Event card --> 36 <style> 37 .demo-card-event.mdl-card { 38 width: 100%; 39 height: 256px; 40 background: #3E4EB8; 41 42 43 } 44 .demo-card-event > .mdl-card__actions { 45 border-color: rgba(255, 255, 255, 0.2); 46 } 47 .demo-card-event > .mdl-card__title { 48 align-items: flex-start; 49 } 50 .demo-card-event > .mdl-card__title > h4 { 51 margin-top: 0; 52 } 53 .demo-card-event > .mdl-card__actions { 54 display: flex; 55 box-sizing:border-box; 56 align-items: center; 57 } 58 .demo-card-event > .mdl-card__actions > .material-icons { 59 padding-right: 10px; 60 } 61 .demo-card-event > .mdl-card__title, 62 .demo-card-event > .mdl-card__actions, 63 .demo-card-event > .mdl-card__actions > .mdl-button { 64 color: #fff; 65 } 66 </style> 67 68 <div class="demo-card-event mdl-card mdl-shadow--2dp"> 69 <div class="mdl-card__title mdl-card--expand"> 70 <h4> 71 {{.user.Name}} ({{.user.Points}}) 72 </h4> 73 </div> 74 <div class="mdl-card__actions mdl-card--border"> 75 <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 76 Signed up {{timeago .user.CreatedAt}} 77 {{ sanitize .user.Summary }} 78 79 </a> 80 <div class="mdl-layout-spacer"></div> 81 <i class="material-icons">event</i> 82 </div> 83 </div> 84 85 </div> 86 </div> 87 88 <h3>Stories</h3> 89 90 91 <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width" > 92 <thead> 93 <tr> 94 <th class="mdl-data-table__cell--non-numeric">Comments</th> 95 <th class="mdl-data-table__cell--non-numeric">Rank</th> 96 <th class="mdl-data-table__cell--non-numeric full-width">Story</th> 97 </tr> 98 </thead> 99 <tbody> 100 {{ $0 := . }} 101 {{ range .stories }} 102 {{ set $0 "story" . }} 103 {{ template "stories/views/row.html.got" $0 }} 104 {{ end }} 105 </tbody> 106 </table> 107 <h3>Comments</h3> 108 <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width" > 109 <thead> 110 <tr> 111 <th class="mdl-data-table__cell--non-numeric">User</th> 112 <th class="mdl-data-table__cell--non-numeric full-width">Comment</th> 113 </tr> 114 </thead> 115 <tbody> 116 {{ range .comments }} 117 {{ set $0 "comment" . }} 118 {{ template "comments/views/comment.html.got" $0 }} 119 {{ end }} 120 </tbody> 121 </table> 122