From a20b46c786293b9b22631529f4f592ca921da782 Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Tue, 22 Jul 2014 15:56:36 +0100 Subject: [PATCH 1/4] template page looks ok, not quite like adam did. Need to battle left padding still --- services/web/app/views/templates/index.jade | 2 +- .../web/app/views/templates/template.jade | 58 ++++++++++++------- .../web/public/stylesheets/app/templates.less | 9 +++ services/web/public/stylesheets/style.less | 2 +- 4 files changed, 47 insertions(+), 24 deletions(-) diff --git a/services/web/app/views/templates/index.jade b/services/web/app/views/templates/index.jade index afbcd53871..e75f236996 100644 --- a/services/web/app/views/templates/index.jade +++ b/services/web/app/views/templates/index.jade @@ -51,7 +51,7 @@ block content -if(tag.totalNumberOfTemplates > 4) .row-fluid .col-md-6.offset3.more-templates - a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates + a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates » diff --git a/services/web/app/views/templates/template.jade b/services/web/app/views/templates/template.jade index 77f218d81f..8f32ad2957 100644 --- a/services/web/app/views/templates/template.jade +++ b/services/web/app/views/templates/template.jade @@ -5,37 +5,51 @@ block content .container .row .page-header - h1 #{template.name} LaTeX Template - -if(tag) - a(href=tag.tagPagePath) ← Back to more #{tag.name} LaTeX templates + h2 + a(href="/templates") Templates + | › + a(href=tag.tagPagePath) #{tag.name} + | › + | #{template.name} .container.txt-lefty .row-fluid() - .span6 + .col-md-6 .entry .row-fluid - .span12 + .col-md-12 a(href=template.pdfUrl) - img(src="#{template.previewUrl}") + //img(src="#{template.previewUrl}") + img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb89a333621a613683ec95/v/1/pdf-converted-cache/style-preview") - .span6() - h3 About - div !{template.description} + .col-md-6 + .card + h3 About + div !{template.description} + div(ng-controller="openInSlController") + a.btn.btn-primary.btn-large(href=template.open_in_sharelatex_url, ng-click='open()', ng-disabled="isDisabled", rel='nofollow') {{openInSlText}} + |   - h3 Actions - span(ng-controller="openInSlController") - a.btn.btn-success.btn-large.open-in-sharelatex(href=template.open_in_sharelatex_url, ng-click='open()', ng-disabled="isDisabled", rel='nofollow') {{openInSlText}} - |   - a.btn.btn-large.download-zip(href=template.zipUrl, rel='nofollow', ng-click='downloadZip()') Download Zip + a.btn.btn-default( + href=template.zipUrl, + rel='nofollow', + ng-click='downloadZip()', + data-toggle="tooltip", + data-placement="bottom", + title="", + data-original-title="Download .zip File" + ) + i.fa.fa-cloud-download - .social_buttons - .addthis_toolbox.addthis_default_style.addthis_32x32_style - a.addthis_button_facebook - a.addthis_button_twitter - a.addthis_button_google_plusone_share - a.addthis_button_compact - script(type='text/javascript', src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-517c16586439faa7') - div + .social_buttons + .addthis_toolbox.addthis_default_style.addthis_32x32_style + a.addthis_button_facebook + a.addthis_button_twitter + a.addthis_button_google_plusone_share + a.addthis_button_compact + script(type='text/javascript', src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-517c16586439faa7') + div   + .card h3 Comment #disqus_thread script(type='text/javascript'). diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less index 0223a481f0..cc35f53d15 100644 --- a/services/web/public/stylesheets/app/templates.less +++ b/services/web/public/stylesheets/app/templates.less @@ -30,4 +30,13 @@ border-top: 1px solid #ddd; } +} + +.social_buttons { + padding-top: 20px; +} + +.sample-template { + -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3); + box-shadow: 0 2px 4px rgba(0,0,0,0.3); } \ No newline at end of file diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index d80e0d9641..4539f910c8 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -18,7 +18,7 @@ @import "components/card.less"; //@import "components/code.less"; @import "components/component-animations.less"; -//@import "components/glyphicons.less"; +@import "components/glyphicons.less"; @import "components/dropdowns.less"; @import "components/button-groups.less"; @import "components/input-groups.less"; From a4b02558dc0da6295406002cbec016f56c7bcb7c Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Tue, 22 Jul 2014 17:24:32 +0100 Subject: [PATCH 2/4] 'carded' the templates page, top search area still needs doing --- .../Templates/TemplatesWebController.coffee | 6 +- services/web/app/views/templates/index.jade | 49 +++++---- services/web/app/views/templates/tag.jade | 18 ++-- .../web/app/views/templates/template.jade | 101 +++++++++--------- .../web/public/stylesheets/app/templates.less | 13 +-- 5 files changed, 94 insertions(+), 93 deletions(-) diff --git a/services/web/app/coffee/Features/Templates/TemplatesWebController.coffee b/services/web/app/coffee/Features/Templates/TemplatesWebController.coffee index 330d5fe9ca..ea0a36058a 100644 --- a/services/web/app/coffee/Features/Templates/TemplatesWebController.coffee +++ b/services/web/app/coffee/Features/Templates/TemplatesWebController.coffee @@ -7,7 +7,7 @@ module.exports = TemplatesWebController = renderTemplatesIndexPage: (req, res)-> logger.log "rendering index page of templates" TemplatesWebController._getDataFromTemplatesApi "/user/#{req.params.user_id}", (err, data)-> - if err? + if err? or !data? logger.err err:err, "something went wrong in renderTemplatesIndexPage" return res.send 500 data.title = "LaTeX Templates" @@ -17,10 +17,10 @@ module.exports = TemplatesWebController = {user_id, tag_name, template_name} = req.params logger.log user_id:user_id, tag_name:tag_name, template_name:template_name, "rendering latex template page" TemplatesWebController._getDataFromTemplatesApi "/user/#{user_id}/tag/#{tag_name}/template/#{template_name}", (err, data)-> - if err? + if err? or !data? logger.err err:err, user_id:user_id, tag_name:tag_name, template_name:template_name, "something went wrong in renerTemplateInTag" return res.send 500 - data.title = data.template.name + data.title = data?.template?.name res.render "templates/template", data tagOrCanonicalPage: (req, res)-> diff --git a/services/web/app/views/templates/index.jade b/services/web/app/views/templates/index.jade index e75f236996..beb6a9cc06 100644 --- a/services/web/app/views/templates/index.jade +++ b/services/web/app/views/templates/index.jade @@ -1,12 +1,13 @@ extends ../layout block content - - .page-header.template-page-header + .content.content-alt .container - .row + .row.template-page-header + .col-md-2 - h1 Templates + h2 + a(href="/templates") Templates .col-md-8(ng-controller="SearchController") form.project-search.form-horizontal(role="form") .form-group.has-feedback.has-feedback-left.col-md-12 @@ -20,7 +21,7 @@ block content ul.unstyled li(ng-repeat='hit in hits') .thumbnail.searchResult - .row-fluid + .row a(ng-href='{{hit.url}}') .col-md-3 img(ng-src='{{hit.image_url}}') @@ -31,27 +32,25 @@ block content + .row + -each tag in tags + -if(tag.totalNumberOfTemplates > 0) + .page-header.col-md-12 + h2 + a(href=tag.tagPagePath) #{tag.name} + .row + -each template in tag.exampleTemplates + .col-md-3.template-thumbnail + a(href=template.templatePagePath ? template.templatePagePath : template.canonicalUrl).thumbnail + //- img(src=template.thumbnailUrl) + img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb8c6f34a287a85245b493/v/0/pdf-converted-cache/style-thumbnail") + div.caption + h3.txt-middle #{template.name} - .container - -each tag in tags - -if(tag.totalNumberOfTemplates > 0) - .page-header.col-md-12 - h2 - a(href=tag.tagPagePath) #{tag.name} - .col-md-12 - .row-fluid - -each template in tag.exampleTemplates - .col-md-3.template-thumbnail - a(href=template.templatePagePath ? template.templatePagePath : template.canonicalUrl).thumbnail - //- img(src=template.thumbnailUrl) - img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb8c1f33621a613683ecad/v/0/pdf-converted-cache/style-thumbnail") - div.caption - h3.txt-middle #{template.name} - - -if(tag.totalNumberOfTemplates > 4) - .row-fluid - .col-md-6.offset3.more-templates - a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates » + -if(tag.totalNumberOfTemplates > 4) + .row-fluid + .col-md-6.offset3.more-templates + a(href=tag.tagPagePath) View all #{tag.totalNumberOfTemplates} #{tag.name} templates » diff --git a/services/web/app/views/templates/tag.jade b/services/web/app/views/templates/tag.jade index 31ff5b6b3f..6913c62595 100644 --- a/services/web/app/views/templates/tag.jade +++ b/services/web/app/views/templates/tag.jade @@ -5,12 +5,16 @@ block content .container .row .page-header - h2 - a(href=tag.tagPagePath) #{tag.name} - + h2 + a(href="/templates") Templates + | › + a(href=tag.tagPagePath) #{tag.name} + .row -each template in templates a(href=template.templatePagePath || template.canonicalUrl) - .span3 - .template-thumbnail.thumbnail - img(src=template.thumbnailUrl) - h3.txt-middle #{template.name} + .col-md-3.template-thumbnail + a(href=template.templatePagePath ? template.templatePagePath : template.canonicalUrl).thumbnail + //- img(src=template.thumbnailUrl) + img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb8c6f34a287a85245b493/v/0/pdf-converted-cache/style-thumbnail") + div.caption + h3 #{template.name} diff --git a/services/web/app/views/templates/template.jade b/services/web/app/views/templates/template.jade index 8f32ad2957..195658e4da 100644 --- a/services/web/app/views/templates/template.jade +++ b/services/web/app/views/templates/template.jade @@ -11,61 +11,58 @@ block content a(href=tag.tagPagePath) #{tag.name} | › | #{template.name} - .container.txt-lefty - .row-fluid() - .col-md-6 - .entry - .row-fluid - .col-md-12 - a(href=template.pdfUrl) - //img(src="#{template.previewUrl}") - img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb89a333621a613683ec95/v/1/pdf-converted-cache/style-preview") + .row + .col-md-6 + .entry + .row + .col-md-12 + a(href=template.pdfUrl) + //img(src="#{template.previewUrl}") + img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb89a333621a613683ec95/v/1/pdf-converted-cache/style-preview") - .col-md-6 - .card - h3 About - div !{template.description} - div(ng-controller="openInSlController") - a.btn.btn-primary.btn-large(href=template.open_in_sharelatex_url, ng-click='open()', ng-disabled="isDisabled", rel='nofollow') {{openInSlText}} - |   + .col-md-6 + .template-details-section + h3 About + div !{template.description} + div(ng-controller="openInSlController") + a.btn.btn-primary.btn-large(href=template.open_in_sharelatex_url, ng-click='open()', ng-disabled="isDisabled", rel='nofollow') {{openInSlText}} + |   - a.btn.btn-default( - href=template.zipUrl, - rel='nofollow', - ng-click='downloadZip()', - data-toggle="tooltip", - data-placement="bottom", - title="", - data-original-title="Download .zip File" - ) + a.btn.btn-default( + href=template.zipUrl, + rel='nofollow', + ng-click='downloadZip()', + data-toggle="tooltip", + data-placement="bottom", + title="", + data-original-title="Download .zip File" + ) - i.fa.fa-cloud-download + i.fa.fa-cloud-download + .template-details-section.social_buttons + .addthis_toolbox.addthis_default_style.addthis_32x32_style + a.addthis_button_facebook + a.addthis_button_twitter + a.addthis_button_google_plusone_share + a.addthis_button_compact + script(type='text/javascript', src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-517c16586439faa7') - .social_buttons - .addthis_toolbox.addthis_default_style.addthis_32x32_style - a.addthis_button_facebook - a.addthis_button_twitter - a.addthis_button_google_plusone_share - a.addthis_button_compact - script(type='text/javascript', src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-517c16586439faa7') - div   - .card - h3 Comment - #disqus_thread - script(type='text/javascript'). - /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ - var disqus_shortname = 'sharelatextemplates'; // required: replace example with your forum shortname - /* * * DON'T EDIT BELOW THIS LINE * * */ - (function() { - var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; - (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); - })(); - noscript - | Please enable JavaScript to view the - a(href='http://disqus.com/?ref_noscript') comments powered by Disqus. - a.dsq-brlink(href='http://disqus.com') - | comments powered by - span.logo-disqus Disqus + h3 Comment + #disqus_thread + script(type='text/javascript'). + /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ + var disqus_shortname = 'sharelatextemplates'; // required: replace example with your forum shortname + /* * * DON'T EDIT BELOW THIS LINE * * */ + (function() { + var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; + dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; + (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); + })(); + noscript + | Please enable JavaScript to view the + a(href='http://disqus.com/?ref_noscript') comments powered by Disqus. + a.dsq-brlink(href='http://disqus.com') + | comments powered by + span.logo-disqus Disqus diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less index cc35f53d15..af6ec4f8e5 100644 --- a/services/web/public/stylesheets/app/templates.less +++ b/services/web/public/stylesheets/app/templates.less @@ -1,10 +1,6 @@ .template-page-header { - background: @gray-lightest; - border-top: 1px solid @gray-lightest; - margin: 0; padding-top: unit(@line-height-base,rem); - h1 { - color: @gray-dark; + h1, h2 { margin-top: 0; margin-right: @line-height-base * 5; line-height: 1; @@ -22,11 +18,12 @@ padding:0px; h3 { color:@link-color; + margin: 10px 0px 10px 20px; } } .caption { - background: @gray-lightest; + background: lighten(@gray-lightest, 3%); border-top: 1px solid #ddd; } @@ -39,4 +36,8 @@ .sample-template { -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.3); box-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.template-details-section { + padding-bottom: 20px; } \ No newline at end of file From c6ab4c4f7ba8a5dab0c02ec3603aa5190aa6e88a Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Tue, 22 Jul 2014 17:43:17 +0100 Subject: [PATCH 3/4] roughly styled template search results clear button in template search also clears results --- services/web/app/views/templates/index.jade | 14 ++++++++------ services/web/public/coffee/main/templates.coffee | 3 +++ services/web/public/stylesheets/app/templates.less | 7 +++++++ 3 files changed, 18 insertions(+), 6 deletions(-) diff --git a/services/web/app/views/templates/index.jade b/services/web/app/views/templates/index.jade index beb6a9cc06..d0c5b7aae2 100644 --- a/services/web/app/views/templates/index.jade +++ b/services/web/app/views/templates/index.jade @@ -3,12 +3,12 @@ extends ../layout block content .content.content-alt .container - .row.template-page-header + .row.template-page-header(ng-controller="SearchController") .col-md-2 h2 a(href="/templates") Templates - .col-md-8(ng-controller="SearchController") + .col-md-8 form.project-search.form-horizontal(role="form") .form-group.has-feedback.has-feedback-left.col-md-12 input.form-control.col-md-12(type='text', ng-model='searchQueryText', ng-keyup='search()', placeholder="Search template library....") @@ -18,15 +18,17 @@ block content style="cursor: pointer;", ng-show="searchQueryText.length > 0" ) - ul.unstyled + .col-md-12 + ul.list-unstyled li(ng-repeat='hit in hits') .thumbnail.searchResult .row a(ng-href='{{hit.url}}') .col-md-3 - img(ng-src='{{hit.image_url}}') - .col-md-9 - h2(ng-bind-html='hit.name') + img(src="https://d1hk1zhcb5hn6i.cloudfront.net/52fb8c6f34a287a85245b493/v/0/pdf-converted-cache/style-thumbnail") + //img(ng-src='{{hit.image_url}}') + .col-md-7 + h1(ng-bind-html='hit.name') p(ng-bind-html='hit.description') diff --git a/services/web/public/coffee/main/templates.coffee b/services/web/public/coffee/main/templates.coffee index 6ab8b28199..a51a8f8c44 100644 --- a/services/web/public/coffee/main/templates.coffee +++ b/services/web/public/coffee/main/templates.coffee @@ -17,6 +17,8 @@ define [ App.factory "algolia", -> + console.log window.sharelatex.algolia?.app_id, window.sharelatex.algolia?.api_key + if window?.sharelatex?.algolia?.app_id? client = new AlgoliaSearch(window.sharelatex.algolia?.app_id, window.sharelatex.algolia?.api_key) index = client.initIndex(window.sharelatex.algolia?.indexes?.templates) @@ -27,6 +29,7 @@ define [ $scope.clearSearchText = -> $scope.searchQueryText = "" + updateHits [] $scope.safeApply = (fn)-> phase = $scope.$root.$$phase diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less index af6ec4f8e5..47a6f81896 100644 --- a/services/web/public/stylesheets/app/templates.less +++ b/services/web/public/stylesheets/app/templates.less @@ -40,4 +40,11 @@ .template-details-section { padding-bottom: 20px; +} + +.searchResult { + img { + max-width: 100%; + height: auto; + } } \ No newline at end of file From 43256d2085593c74a395aaf53f93deea2b87b64e Mon Sep 17 00:00:00 2001 From: Henry Oswald Date: Tue, 22 Jul 2014 17:52:47 +0100 Subject: [PATCH 4/4] lined up the templates header with the search bar. Need to kill big space bellow it next --- services/web/public/stylesheets/app/templates.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/templates.less b/services/web/public/stylesheets/app/templates.less index 47a6f81896..103a839e01 100644 --- a/services/web/public/stylesheets/app/templates.less +++ b/services/web/public/stylesheets/app/templates.less @@ -1,7 +1,7 @@ .template-page-header { padding-top: unit(@line-height-base,rem); h1, h2 { - margin-top: 0; + margin-top: 6px; margin-right: @line-height-base * 5; line-height: 1; }