Download as
Browse Code »

Commit 0819c8535058ee8f3d67207b88d104a522cdf87f

Authored by Pedro de Lyra Pereira
1 parent d9918355
Exists in master and in 9 other branches bootstrap_modal, bug_fix_40, code_block, design_41_backup, event_block, master_with_pkg_fixes, pkg_fixes, r4, r5_design

Small adjustments in blog community secondary page

Showing 3 changed files with 107 additions and 59 deletions   Show diff stats
html-cms/blog.html
  Diff comments   View file @0819c85
... ... @@ -11,29 +11,50 @@
11 11 <div class="blog-main-content" >
12 12 <div id="date" >Hoje</div>
13 13 <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
14   - <img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg">
  14 +<div id="image-container">
  15 + <img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg" />
  16 +</div>
15 17 <div id="description" >Ambiente traz soluções que dispensam pagamentos de licença simples, de fácil utilização e com novas funcionalidades.</div>
16 18 </div>
17 19 <div class="blog-event-list">
18 20 <div class="blog-event-item">
19   - <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
20   - <div id="date">Ontem</div>
21   - <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
22   - <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  21 + <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
  22 + <div class="blog-event-information">
  23 + <div class="date">Ontem</div>
  24 + <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
  25 + <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  26 + </div>
23 27 </div>
24 28 <div class="blog-event-item">
25   - <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
26   - <div id="date">Ontem</div>
27   - <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
28   - <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  29 + <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e5-0fc0d412b324.jpeg"></div>
  30 + <div class="blog-event-information">
  31 + <div class="date">Ontem</div>
  32 + <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
  33 + <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  34 + </div>
29 35 </div>
30 36 <div class="blog-event-item">
31   - <div id="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e53uh3-0fc0d412b324.jpeg"></div>
32   - <div id="date">Ontem</div>
33   - <div id="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
34   - <div id="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  37 + <div class="item-image"><img src="http://www2.planalto.gov.br/chamadas-da-home/banner-rotativo/lideres-dos-partidos-da-base-aliada-na-camara-dos-deputados/@@images/d77b711c-a9a3-4cd4-b7e53uh3-0fc0d412b324.jpeg"></div>
  38 + <div class="blog-event-information">
  39 + <div class="date">Ontem</div>
  40 + <div class="title">Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit</div>
  41 + <div class="description" >Lorem ipsum dolor sit amlor sit amet, contur adipiscing elit.</div>
  42 + </div>
35 43 </div>
36 44 </div>
  45 +<div class="community-content-footer">
  46 + <ul id="indexes">
  47 + <li id="previous">
  48 + <span id="left-arrow"></span>
  49 +<a href>Anteriores</a></li>
  50 + <li id="first-index" class="active-index"><a href>1</a></li>
  51 + <li id="second-index" class="default-index"><a href>2</a></li>
  52 + <li id="third-index" class="default-index"><a href>3</a></li>
  53 + <li id="fourth-index" class="default-index"><a href>4</a></li>
  54 + <li id="fifth-index" class="default-index"><a href>5</a></li>
  55 + <li id="next"><a href>Próximos</a><span id="right-arrow"></span></li>
  56 + </ul>
  57 +</div>
37 58 </div>
38 59  
39 60 <!-- LEFT SIDE BAR -->
... ... @@ -55,23 +76,11 @@
55 76 <!-- RIGHT SIDE BOX -->
56 77 <div id="temp">
57 78 <div class="community-side-box">
58   - <div class="community-logo">
59   -
  79 + <div class="community-logo-container">
  80 + <img src="https://beta.softwarepublico.gov.br/social/image_uploads/0000/0766/www.softwarepublico.gov_.br47_big_big.gif?1432145671" />
60 81 </div>
61 82 <div class="community-name">
62 83 <p>CACIC - Configurador Automático e Coletor de Informações Computacionais</p>
63 84 </div>
64 85 </div>
65   -</div>
66   -
67   -<div class="community-content-footer">
68   - <ul id="indexes">
69   - <li id="previous">Anteriores</li>
70   - <li class="index">1</li>
71   - <li class="index">2</li>
72   - <li class="index">3</li>
73   - <li class="index">4</li>
74   - <li class="index">5</li>
75   - <li id="next">Próximos</li>
76   - </ul>
77 86 </div>
78 87 \ No newline at end of file
... ...
images/left-arrow.png
View file @0819c85

249 Bytes | W: | H:

268 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
pagina_comunidade.css
  Diff comments   View file @0819c85
... ... @@ -658,24 +658,33 @@ ul#itens-legend-grafic{
658 658 overflow: hidden;
659 659 }
660 660  
661   -.community-logo {
662   - content: url('images/logo-participa.png'); /* LOGOTIPO DA COMUNIDADE */
663   - /*content: url('images/bg-bloco-de-trilhas.png');*/
664   - width: 100%;
  661 +.community-logo-container {
  662 + height: 150px;
  663 + width: 200px;
665 664 border-bottom: 4px solid #3E67B1;
  665 + overflow: hidden;
  666 + text-align: center;
  667 + display: table-cell;
  668 + vertical-align: middle;
  669 +}
  670 +
  671 +.community-logo-container img {
  672 + height: auto;
  673 + width: 70%;
666 674 }
667 675  
668 676 .community-name {
669 677 font-family: Arial;
670 678 font-size: 14px;
671 679 font-weight: 700;
672   - padding: 13px 15px 0px 15px;
673   - text-align: center;
  680 + padding: 13px 10px 0px 10px;
  681 + text-align: center;
674 682 height: 100%;
675 683 background-color: #ECEDF1;
676 684 }
677 685  
678 686 .community-name p {
  687 + font-family: open sans;
679 688 font-size: 16px;
680 689 line-height: 17px;
681 690 letter-spacing: 0px;
... ... @@ -720,7 +729,7 @@ ul#itens-legend-grafic{
720 729 #community-blog {
721 730 width: 500px;
722 731 height: 2200px;
723   - background-image: url('images/blog-teste.png');
  732 + /*background-image: url('images/blog-teste.png');*/
724 733 background-repeat: no-repeat;
725 734 }
726 735  
... ... @@ -761,29 +770,19 @@ ul#itens-legend-grafic{
761 770 float: left;
762 771 margin-right: 9px;
763 772 padding: 5px 12px 4px 9px;
764   - border: 1px solid #ECEDF1;
  773 + border: 1px solid #D3D6DE;
765 774 border-radius: 4px;
766 775 color: #2C66CE;
767 776 }
768 777  
769 778 .blog-main-content {
770 779 font-family: Arial;
  780 + color: #172738;
771 781 margin-top: 46px;
772 782 }
773 783  
774   -.blog-main-content img {
775   - margin-left: auto;
776   - margin-right: auto;
777   - max-height: 208px;
778   - width: 100%;
779   - height: 100%;
780   - margin-top: 13px;
781   - border-radius: 2px;
782   - overflow: hidden;
783   -}
784   -
785 784 .blog-main-content #date {
786   - font-size: 14px;
  785 + font-size: 12px;
787 786 text-transform: uppercase;
788 787 }
789 788  
... ... @@ -795,6 +794,19 @@ ul#itens-legend-grafic{
795 794 letter-spacing: 0.4px;
796 795 }
797 796  
  797 +.blog-main-content #image-container {
  798 + border-radius: 6px;
  799 + margin-top: 13px;
  800 + overflow: hidden;
  801 + height: 210px;
  802 + width: 490px;
  803 +}
  804 +
  805 +.blog-main-content #image-container img {
  806 + height: auto;
  807 + width: 490px;
  808 +}
  809 +
798 810 .blog-main-content #description {
799 811 font-size: 15px;
800 812 margin-top: 11px;
... ... @@ -808,32 +820,39 @@ ul#itens-legend-grafic{
808 820 }
809 821  
810 822 .blog-event-item{
  823 + position: relative;
  824 + float: left;
811 825 width: 500px;
812   - height: 110px;
813 826 border-top: 1px solid #D3D6DE;
814 827 padding-top: 25px;
  828 + margin-bottom: 25px;
815 829 }
816 830  
817   -.blog-event-item #date {
  831 +.blog-event-item .blog-event-information .date {
818 832 font-size: 12px;
819 833 margin-top: -1px;
820 834 text-transform: uppercase;
821 835 }
822 836  
823   -.blog-event-item #title {
824   - font-weight: 700;
  837 +.blog-event-item .blog-event-information .title {
  838 + font-weight: 700 !important;
825 839 font-size: 15px;
826 840 margin-top: 6px;
827 841 letter-spacing: 0.5px;
828 842 }
829 843  
830   -.blog-event-item #description {
  844 +.blog-event-item .blog-event-information .description {
831 845 font-size: 14px;
832 846 margin-top: 5px;
833 847 letter-spacing: -0.2px;
834 848 }
835 849  
836   -.blog-event-item #item-image {
  850 +.blog-event-item .blog-event-information {
  851 + float: left;
  852 + width: 370px;
  853 +}
  854 +
  855 +.blog-event-item .item-image {
837 856 float: left;
838 857 height: 100%;
839 858 margin-right: 20px;
... ... @@ -844,11 +863,11 @@ ul#itens-legend-grafic{
844 863 height: 63px;
845 864 border-radius: 5px;
846 865 padding-left: 4px;
847   -
848 866 }
849 867  
850 868 .community-content-footer {
851   - margin-top: 783px;
  869 + position: relative;
  870 + float: left;
852 871 padding-left: 2px;
853 872 width: 100%;
854 873 border-top: 1px solid #D3D6DE;
... ... @@ -861,7 +880,7 @@ ul#itens-legend-grafic{
861 880 border: 1px solid #D3D6DE;
862 881 }
863 882  
864   -.community-content-footer ul .index {
  883 +.community-content-footer ul .default-index {
865 884 padding: 7px 11px 7px 11px;
866 885 border-radius: 4px;
867 886 margin-right: 4px;
... ... @@ -890,10 +909,30 @@ ul#itens-legend-grafic{
890 909 letter-spacing: 0.6px;
891 910 }
892 911  
893   -.community-content-footer #indexes li a{
894   - color: black;
  912 +.community-content-footer #indexes li a {
  913 + color: #172738;
895 914 }
896 915  
897   -.community-content-footer li:active .index {
  916 +.community-content-footer #indexes .active-index {
898 917 background-color: #ECEDF1;
  918 + padding: 7px 11px 7px 11px;
  919 + border-radius: 4px;
  920 + margin-right: 4px;
  921 + font-family: Arial;
  922 + font-weight: 700;
  923 + font-size: 16px;
  924 +}
  925 +
  926 +.community-content-footer #indexes #previous #left-arrow {
  927 + position: absolute;
  928 + content: url('images/left-arrow-black.png');
  929 + margin-left: -25px;
  930 + margin-top: 3px;
  931 +}
  932 +
  933 +.community-content-footer #indexes #next #right-arrow {
  934 + position: absolute;
  935 + content: url('images/right-arrow-black.png');
  936 + margin-left: 18px;
  937 + margin-top: 3px;
899 938 }
900 939 \ No newline at end of file
... ...