# HG changeset patch # User cavaliet # Date 1372178589 -7200 # Node ID af59627418e7df379763fa220ae56fcf55f90770 # Parent 2fea6fdc024c4724b253b15bb308b9fd5207d2e1 view fragment with new style diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/models.py --- a/src/egonomy/models.py Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/models.py Tue Jun 25 18:43:09 2013 +0200 @@ -95,6 +95,11 @@ description = models.TextField(blank=True, null=True) tags = models.TextField(blank=True, null=True) + @property + def tag_list(self): + # tags in list + return self.tags.split(",") + def get_viewbox_info(self): if not self.coordinates or self.coordinates=="MZ" or self.coordinates=="": diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/css/slideshow.css --- a/src/egonomy/static/egonomy/css/slideshow.css Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/static/egonomy/css/slideshow.css Tue Jun 25 18:43:09 2013 +0200 @@ -1,7 +1,19 @@ -.slideshow-wrap, .imagezone { +body { + overflow: hidden; +} + +.slideshow-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } +.backdrop { + position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px); +} + +.main-image { + position: absolute; top: 50px; right: 50px; +} + .caption-wrap { position: absolute; left: 50px; right: 50px; bottom: 50px; } @@ -12,6 +24,10 @@ padding: 16px 0; margin: 0; } +.main-image, .caption { + box-shadow: 4px 4px 2px rgba(0,0,0,.5); +} + .caption h2 { font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px; } diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/css/style.css --- a/src/egonomy/static/egonomy/css/style.css Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/static/egonomy/css/style.css Tue Jun 25 18:43:09 2013 +0200 @@ -3,7 +3,8 @@ .wrap{width: 950px; margin: 0 auto; } .uppercase{text-transform: uppercase;} .fragment{width: 225px; height: 225px;} -.va-top{vertical-align: top;} +/*.fragment-110{width: 110px; height: 110px; display: inline-block;}*/ +.va-top{vertical-align: top;padding-top: 4px;} header, footer{width:100%;background: url(../img/border-bottom-header.png) center bottom no-repeat;} footer{margin-bottom: 60px;background-position: top center; padding-top: 20px;font-size: 15px; font-family: 'Lato'; font-weight: 300;} footer h6{float: left;} @@ -39,6 +40,15 @@ .title-menu{ position: absolute; bottom: 0; right: 0;} .title-menu li{float: left;} +.edition-table-left{ + width: 700px !important; + float: left; +} +.edition-table-right{ + text-align: right; + width: 180px !important; + float: right; +} .bar-tools{margin-bottom: 12px; line-height: 35px; padding-bottom: 1px; font-family: 'Lato'; font-weight: 300; display:block;background-image: url(../img/border-bar-tools.png), url(../img/border-bar-tools.png); background-position: top center, bottom center; background-repeat: repeat-x;} .bar-tools h3{ font-size: 18px; display: inline-block; text-transform: uppercase;} .bar-tools ul{float: right;} @@ -58,7 +68,7 @@ a.icon.plus{background-image: url(../img/icon-plus-15.png);} a.icon.edit{background-image: url(../img/icon-pencil-15.png);} a.icon.trash{background-image: url(../img/icon-trash-15.png);} - +a.icon.copy{background-image: url(../img/icon-copy-15.png);} /* Home */ .w650{width: 650px;} .our-images{margin-bottom: 38px; text-align: center; font-size: 12px; font-family: 'Lato'; font-weight : bold; font-style : italic; color: #58595A;} @@ -164,9 +174,18 @@ .popin .buttons{text-align: right;} .btn{cursor:pointer; border: none; vertical-align:middle; display: inline-block; color: #FFF; font-size: 12px; font-family: 'Lato'; height: 25px; line-height: 25px; padding: 0 12px; background-color: #666;} .block{display: block;} -.popin-wrap, .popin{display: none;} + .big-popin{width: 572px; margin-left: -286px;} - +.popin th{ vertical-align:middle;font-family: 'Lato'; font-size: 12px; font-weight: 300; width: 110px; text-align: left;} +.popin .col-left{width: 316px; float: left; padding-left: 12px;} +.w-192{width: 192px; margin: 0 !important;} +.popin .col-left input[type=text]{width: 172px;} +.no-margin{margin: 0 !important;} +.big-popin table{border-spacing:0 5px;border-collapse:separate;} +.big-popin textarea{width: 304px; max-width: 304px; height: 170px;} +.list-projets-2.in-popin{float: right; display: inline-block; padding-right: 12px;} +.list-projets-2.in-popin li{margin: 0;} +.big-popin .buttons{clear: both; border-top: 1px solid #DDD; padding-top: 10px; padding-right: 12px;} .edition{background-color: #eee; padding: 0 28px; margin-bottom: 64px;} .edition .slideshow{ min-height: 80px; position:relative; padding: 24px 0; text-align: center;} .slideshow .arrow-wrap{display: block;} @@ -176,6 +195,12 @@ .slideshow .share li{float: left; margin-left: 8px;} .image-wrap{display: inline-block;} .edition{font-family: 'Lato'; font-size: 14px; text-align: left;} +.big-popin form{padding: 8px 0 20px 0;} + + +.popin-wrap, .popin{display: none;} + + .edition th{color: #777; min-width: 140px; } .edition td{width:100%;color: #000; line-height: 16px;} @@ -198,7 +223,7 @@ .box-edition:last-child{border-bottom: none;} .edition input[type=text], .edition textarea{border: 1px solid #CACACA;} .edition textarea{width:100%; max-width: 754px;} -.edition input[type=text]{height: 23px; line-height: 23px; padding: 0 6px;} +.edition input[type=text]{width: 742px; height: 23px; line-height: 23px; padding: 0 6px;} .no-before:before{content:"" ; display: block;} .tagit{font-family: 'Lato' !important;} .ui-corner-all{-webkit-border-radius : 0 !important;-moz-border-radius : 0 !important;border-radius : 0 !important;} @@ -239,9 +264,14 @@ .content-project{background-color: #eee;} .content-project p{font-family: 'Lato'; font-size: 13px; font-weight: 300; line-height: 15px; padding: 10px;} +body{overflow: auto !important;} /* imported */ +.square-fragment-110 { + height: 110px; + width: 110px; +} .square-fragment-225 { height: 225px; width: 225px; @@ -283,6 +313,13 @@ .image-and-fragment svg, .cutout-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +.sub_svg_image { + opacity: .3; +} +.sub_svg_image:hover { + opacity: 1; +} +/* search highlight */ .highlight { background: #ffff80; } diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/img/arrow-select.png Binary file src/egonomy/static/egonomy/img/arrow-select.png has changed diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/img/icon-copy-15.png Binary file src/egonomy/static/egonomy/img/icon-copy-15.png has changed diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/js/main.js --- a/src/egonomy/static/egonomy/js/main.js Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/static/egonomy/js/main.js Tue Jun 25 18:43:09 2013 +0200 @@ -1,11 +1,34 @@ $(function(){ +//filters + $('.filters a').each(function(){ + var text = $.trim($(this).text()); + if(text.length > 30){ + $(this).text(text.substr(0, 30) + '...') + } + }); //masonry - var container = $('.list-projets-3'); - container.masonry({ + var masonry465 = $('.masonry-465'); + masonry465.masonry({ columnWidth: 465, - itemSelector: '.item', + itemSelector: '.item-masonry', gutter : 20 }); + + var masonry225 = $('.masonry-225'); + masonry225.masonry({ + columnWidth: 225, + itemSelector: '.item-masonry', + gutter : 16 + }); + + function masonry177(){ + var masonry177 = $('.masonry-177'); + masonry177.masonry({ + columnWidth: 177, + itemSelector: '.item-masonry' + }); + } + masonry177(); //popin $('.open-popin').bind('click', function(e){ e.preventDefault(); @@ -27,14 +50,74 @@ e.stopPropagation(); }); //tag it - var keywordsTagIt = $('.tag-it').tagit({ - allowSpaces : true + if($('.tag-it').length){ + var keywordsTagIt = $('.tag-it').tagit({ + allowSpaces : true + }); + $('.list-key-add a').bind('click', function(e){ + e.preventDefault(); + var tag = $(this).attr('data-tag'); + keywordsTagIt.tagit("createTag", tag); + }); + } +//mosaic + $('.toggle-comment').bind('click', function(e){ + e.preventDefault(); + $('.show-comment, .hide-comment').hide(); + if($('.mosaic').length){ + $('.mosaic').removeClass('mosaic').addClass('mosaic-comment'); + $('.hide-comment').show(); + }else{ + $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic'); + $('.show-comment').show(); + } + masonry177(); }); - $('.list-key-add a').bind('click', function(e){ + + $('.display-keyword').bind('click', function(e){ e.preventDefault(); - var tag = $(this).attr('data-tag'); - keywordsTagIt.tagit("createTag", tag); + var ul = $(this).parents('ul'), + li = $(this).parents('li'), + iconAction = li.find('.icon-action'), + index = li.index(), + keyword = $(this).attr('data-keyword'); + enabledDisplayKeyword(li, keyword, iconAction); + + ul.find('li').each(function(k, v){ + if(index != k){ + var displayKeyword = $(v).find('.display-keyword'), + iconAction = $(v).find('.icon-action'), + keyword = displayKeyword.attr('data-keyword'); + disabledDisplayKeyword($(v), keyword, iconAction); + } + }); + }); + $('.icon-action').bind('click', function(e){ + e.preventDefault(); + var li = $(this).parents('li'); + toggleDisplayKeyword(li); }); - + function toggleDisplayKeyword(li){ + var displayKeyword = li.find('.display-keyword'), + iconAction = li.find('.icon-action'), + keyword = displayKeyword.attr('data-keyword'); + if(li.hasClass('disabled')){ + enabledDisplayKeyword(li, keyword, iconAction); + }else{ + disabledDisplayKeyword(li, keyword, iconAction); + } + } + function enabledDisplayKeyword(li, keyword, iconAction){ + iconAction.removeClass('cross').removeClass('circle'); + li.removeClass('disabled'); + $('li.keyword-'+keyword).find('.curtain').hide(); + iconAction.addClass('cross'); + } + function disabledDisplayKeyword(li, keyword, iconAction){ + iconAction.removeClass('cross').removeClass('circle'); + li.addClass('disabled'); + $('li.keyword-'+keyword).find('.curtain').show(); + iconAction.addClass('circle'); + } });//ready diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/static/egonomy/js/slideshow.js --- a/src/egonomy/static/egonomy/js/slideshow.js Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/static/egonomy/js/slideshow.js Tue Jun 25 18:43:09 2013 +0200 @@ -1,13 +1,21 @@ $(function() { - var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50; + var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), + margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"), + lastSlide = null; function showSlide() { var slide = slides[currentSlide]; - jqcaption.find("h2").text(slide.title); - jqcaption.find("h3").text(slide.author); - jqcaption.find("p").text(slide.description); + if (slide !== lastSlide) { + jqcaption.find("h2").text(slide.title); + jqcaption.find("h3").text(slide.author); + jqcaption.find("p").text(slide.description); + jqmainimg.attr("src", slide.image.src); + jqbackdrop.attr("src", slide.image.src); + } + + lastSlide = slide; if (slide.image && slide.image.width) { var ww = jqwin.width(), @@ -23,27 +31,19 @@ Math.min((h2 / hi), (w1 / wi)) ), wa = wi * ra, ha = hi * ra, - xa = ww - margin - wa, rb = Math.max(ww / wi, wh / hi), wb = wi * rb, hb = hi * rb, xb = (ww - wb) / 2, yb = (wh - hb) / 2; - jqcanvas.attr({ - width: ww, - height: wh + jqmainimg.css({ + width: wa, + height: ha }); - - var ctx = jqcanvas[0].getContext('2d'); - - ctx.drawImage(slide.image, xb, yb, wb, hb); - - ctx.fillStyle = 'rgba(255,255,255,.65)'; - ctx.fillRect(0,0,ww,wh); - - ctx.fillStyle = 'rgba(0,0,0,.3)'; - ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch); - ctx.fillRect(xa + 4, margin + 4, wa, ha); - - ctx.drawImage(slide.image, xa, margin, wa, ha); + jqbackdrop.css({ + width: wb, + height: hb, + left: xb, + top: yb + }); } } diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/templates/egonomy_annotate_picture.html --- a/src/egonomy/templates/egonomy_annotate_picture.html Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/templates/egonomy_annotate_picture.html Tue Jun 25 18:43:09 2013 +0200 @@ -5,6 +5,38 @@ {% block title %}{% trans "Annotate a picture" %}{% endblock %} +{% block popins %} +
+
+
+

{% trans "Add to the collection" %}

+ +
+
+
+

+ + +

+

+ + +

+
+ {% trans "Cancel" %} + +
+
+
+
+
+{% endblock %} + {% block content %}

{{ img.metadata.titre|default:_("No title") }}

@@ -19,7 +51,11 @@ {% trans "Create a fragment" %}
  • - Ajouter à ma collection + {% if user.is_authenticated %} + {% trans "Add to my collection" %} + {% else %} + {% trans "Add to my collection" %} + {% endif %}
    • + +
    +
    +
    +
    + {% if fragment_only %} +
    + {% with fragment.image.info.image_file as image %} + {% include "partial/fragment_only.html" %} + {% endwith %} +
    + {% else %} +
    + {% with 0.99 as ratio %} + {% with "600" as w_size %} + {% with "x600" as h_size %} + {% include "partial/picture_and_fragment.html" %} + {% endwith %} + {% endwith %} + {% endwith %}
    -
    - {% if fragment_only %} - - {% trans "See the fragment in its full picture" %} :
    -
    - {% with 1 as ratio %} - {% with "110" as w_size %} - {% with "x110" as h_size %} - {% include "partial/picture_and_fragment.html" %} - {% endwith %} - {% endwith %} - {% endwith %} -
    + {% endif %} +
    +
    + +
    +
    + +
    + +
    +
    + + + + + + + + + + + + + + + + + + + +
    {% trans "Source picture" %} :{{ fragment.image.metadata.titre|default:_("No title") }}
    {% trans "Fragment's title" %} :{{ fragment.title }}
    {% trans "Fragment's description" %} :{{ fragment.description }}
    {% trans "Last modification" %} :{{ fragment.date_saved }} {% trans 'by' %} {{ fragment.author }}
    + + + {% if fragment_only %} + + - {% else %} - - {% trans "See the fragment only" %} :
    -
    + {% else %} +
    + - {% endif %} - - + {% endif %} + +
    {% trans "See the fragment in its full picture" %} :
    +
    + {% with 1 as ratio %} + {% with "110" as w_size %} + {% with "x110" as h_size %} + {% include "partial/picture_and_fragment.html" %} + {% endwith %} + {% endwith %} + {% endwith %} +
    +
    {% trans "See the fragment only" %} :
    +
    {% with image=fragment.image.info.image_file %} {% include "partial/fragment_only.html" %} {% endwith %} -
    +     +
    +
    +
    + + + + + + + +
    {% trans "Fragment's keywords" %} +
      + {% for t in fragment.tag_list %} + {% if t != "" %}
    • {{ t }}
      • {% endif %} + {% endfor %} +
    +
    -
    -
    -

    {% trans "Fragments from this picture" %}

    - + {% else %} +

    {% trans "No fragment" %}

    + {% endif %}
    +
    +

    Collections liées à cette image :

    +

    {% trans "No collection" %}

    +
    +
    {% endblock %} - diff -r 2fea6fdc024c -r af59627418e7 src/egonomy/templates/registration/login.html --- a/src/egonomy/templates/registration/login.html Tue Jun 25 17:24:41 2013 +0200 +++ b/src/egonomy/templates/registration/login.html Tue Jun 25 18:43:09 2013 +0200 @@ -1,4 +1,4 @@ -{% extends "egonomy_base.html" %} +{% extends "egonomy_newbase.html" %} {% load static %} {% load i18n %} @@ -24,8 +24,7 @@ - - + {% endblock %}