Changeset 967

Show
Ignore:
Timestamp:
11/05/08 15:04:44 (2 months ago)
Author:
clay
Message:

Changed bubble buttons a bit.

Added options button with roll over for browse page. Changed css and what is included in browse page.

Location:
huginmunin/trunk/web/hm/app
Files:
4 added
5 modified

Legend:

Unmodified
Added
Removed

  • huginmunin/trunk/web/hm/app/media/css/general.css

    r963 r967  
    2020light gray: #f1edeb not used yet 
    2121purple gray: #d0d0dd 
    22 sunny highlight: fff9ce 
     22peach highlight: fff9ce 
     23cornmeal highlight: fffdc7 
    2324*/ 
    2425 
    … …  
    4142} 
    4243 
    43 .bubble_button { 
    44         width: 6.7em; 
    45         padding: 1.8em; 
     44.large_button { 
     45        width: 11em; 
     46        padding: .5em; 
    4647        z-index: 2; 
     48} 
     49 
     50.small_button { 
     51        width: 7em; 
     52        padding: .5em; 
     53        z-index: 2; 
     54} 
     55 
     56.control_button { 
     57        margin: -4em 6em; 
     58        float: right; 
    4759} 
    4860 
    … …  
    138150 
    139151ul li {font-size:1.2em;} 
    140  
    141 p {font-size:1.2em;} 
    142152  
     153p { 
     154        padding-bottom:.55em; 
     155        padding-top:.275em; 
     156        font-size:1.15em; 
     157} 
     158 
    143159body{ 
    144160        font-family: Trebuchet, Verdana, sans-serif; 
    … …  
    340356} 
    341357 
    342 p { 
    343         padding-bottom:.55em; 
    344         padding-top:.275em; 
    345 } 
    346  
    347358.line_height_extra{ 
    348359        line-height: 300%; 
     360} 
     361 
     362.control_item{ 
     363        font-size: 1.05em; 
     364        padding: .3em; 
    349365} 
    350366 
    … …  
    691707/****** BROWSE REVIEWS ******/ 
    692708#add_node { text-align: center; } 
    693 #list_of_nodes .node { clear: both; padding: 0px 5px 0px 5px; border-bottom: 1px solid #BBB; border-top: 1px solid #BBB; margin-top: 5px; } 
    694 /* #list_of_nodes .node table { border: 1px solid #BBB; border-right:none; border-left:none;} */ 
     709 
     710#list_of_nodes .node {  
     711        clear: both;  
     712        padding: 0px 5px 0px 5px;  
     713        border-top: 1px solid #d0d0dd;  
     714} 
     715 
    695716#list_of_nodes .node td .left { text-align: left; } 
    696717#list_of_nodes .node td .mid { text-align: center; } 
    … …  
    699720#list_of_nodes .node p span.n { padding: 0px; margin: 0px; } 
    700721#list_of_nodes .node p span.nn { font-size: .8em; padding-left: 10px; } 
    701 #list_of_nodes .node .r { float: right; font-size: .9em; } 
     722#list_of_nodes .node .browse_right { text-align:right; margin-top:.1em; font-size:1.02em; } 
    702723#list_of_nodes .node .quote { padding: 5px 25px 5px 25px; clear: both; } 
     724 
     725.float_right { float:right; } 
     726.float_left { float:left;} 
     727 
    703728/** browse controls **/ 
    704 .letter { cursor:pointer; text-decoration:underline; padding: 2px; } 
    705 .letter + .selected { text-decoration: none; cursor: default; background: yellow; } 
     729 
     730.letter {  
     731        font-size: 1.1em;  
     732        cursor:pointer; } 
     733 
     734.letter + .selected {  
     735        font-size: 1.2em;  
     736        text-decoration:underline;  
     737        cursor: default;  
     738        padding: 0 .3em 0 .3em; 
     739        background: #fffdc7; } 
    706740 
    707741/****** PAGINATION ******/ 

  • huginmunin/trunk/web/hm/app/templates/base.html

    r963 r967  
    8585    </script> 
    8686         
     87        <!-- Mouseclick on "expand_button" expands a div or span with javascript --> 
     88        <!-- This script hides "expanding_area" initially --> 
     89        <script type="text/javascript"> 
     90                $(document).ready(function() { 
     91                        $(".expanding_area, .contract_button").hide(); 
     92                        $(".expand_button, .contract_button").css("cursor", "pointer"); 
     93        <!-- This script shows the area when "expand_button" is clicked--> 
     94                        $(".expand_button").click(function() { 
     95                        $(this).hide(); 
     96                        $(this).siblings(".expanding_area").show(); 
     97                        $(this).siblings(".contract_button").show(); 
     98                   }); 
     99    <!-- This script hides the area when "contract_button" is clicked--> 
     100                        $(".contract_button").click(function() { 
     101                        $(this).hide(); 
     102                        $(this).siblings(".expanding_area").hide(); 
     103                        $(this).siblings(".expand_button").show(); 
     104                   }); 
     105                 });   
     106        </script> 
     107         
     108         
    87109        {% block javascript_includes %} 
    88110        {% endblock %} 

  • huginmunin/trunk/web/hm/app/templates/graph/list.html

    r962 r967  
    11<div class="left"> 
    22 
    3 <DIV id="controls"> 
    4         <SELECT name="filter_by_type" onChange="dropdown_submit('filter_by_type', this);"> 
    5                 <OPTION value="none">No filter</OPTION> 
    6                 {% for type in types %} 
    7                         <OPTION value="{{ type.id }}" {% ifequal selected_type type.id %} selected {% endifequal %}>{{ type.label }}</OPTION> 
     3<div> 
     4        <div class="contract_button control_button"> 
     5                <span class="bubble_button"> 
     6                                <a><img class="small_button" alt="Less Options" src="/Main/media/img/buttons/Hide.png"></a> 
     7                                <a><img class="small_button" alt="Click to Hide" src="/Main/media/img/buttons/Hide_Mouse_Over.png"></a> 
     8                </span> 
     9        </div> 
     10        <div class="expand_button control_button"> 
     11                <span class="bubble_button small_button"> 
     12                                <a><img class="small_button" alt="More Options" src="/Main/media/img/buttons/Options.png"></a> 
     13                                <a><img class="small_button" alt="Click for Options" src="/Main/media/img/buttons/Options_Mouse_Over.png"></a> 
     14                </span> 
     15        </div> 
     16        <div class="expanding_area"><br> 
     17                        <DIV id="add_node" class="control_item float_right"> 
     18                                {% if user.is_authenticated %} 
     19                                        {% include 'graph/node_add.html' %} 
     20                                {% else %} 
     21                                        Please <a href="{% url login %}?redirect_to={% url browse%}">login</a> to Add Listing. 
     22                                {% endif %} 
     23                        </DIV> 
     24                                 
     25                        <DIV id="controls"> 
     26                                <div class="control_item"> 
     27                                        Sort by item type: 
     28                                        <SELECT name="filter_by_type" onChange="dropdown_submit('filter_by_type', this);"> 
     29                                                <OPTION value="none">No filter</OPTION> 
     30                                                {% for type in types %} 
     31                                                        <OPTION value="{{ type.id }}" {% ifequal selected_type type.id %} selected {% endifequal %}>{{ type.label }}</OPTION> 
     32                                                {% endfor %} 
     33                                        </SELECT> 
     34                                </div>   
     35                                <div class="control_item">       
     36                                Sort by consumer interest: 
     37                                        <SELECT name="filter_by_interest" onChange="dropdown_submit('filter_by_interest', this);"> 
     38                                                <OPTION value="none">No filter</OPTION> 
     39                                                {% for interest in interests %} 
     40                                                        <OPTION value="{{ interest.id }}" {% ifequal selected_interest interest.id %} selected {% endifequal %}>{{ interest.label }}</OPTION> 
     41                                                {% endfor %} 
     42                                        </SELECT> 
     43                                </div> 
     44                                <div class="control_item"> 
     45                                        Sorty by tag. 
     46                                        <SELECT name="filter_by_tag" onChange="dropdown_submit('filter_by_tag', this);"> 
     47                                                <OPTION value="none">No filter</OPTION> 
     48                                                {% for tag in tags %} 
     49                                                        <OPTION value="{{ tag.id }}" {% ifequal selected_tag tag.id %} selected {% endifequal %}>{{ tag.tag }}</OPTION> 
     50                                                {% endfor %}  
     51                                        </SELECT> 
     52                                </div>   
     53                                 
     54                                <DIV class="control_item center"> 
     55                                        See only: 
     56                                        {% for letter in letters %} 
     57                                                <SPAN class="letter {% ifequal selected_letter letter %}selected{% endifequal %}" onClick="get_paramter_submit('filter_by_letter', '{{ letter }}');">{{ letter }}</SPAN> 
     58                                        {% endfor %} 
     59                                        <SPAN class="letter {% ifequal selected_letter "none" %}selected {% endifequal %}" onClick="location.href = remove_get_parameter('filter_by_letter');">(View All)</SPAN> 
     60                                </DIV> 
     61                        </DIV> 
     62                </div> 
     63</div> 
     64                         
     65        <DIV id="list_of_nodes"> 
     66                         
     67                {% load pagination_tags %} 
     68                {% autopaginate nodes 10 %} 
     69         
     70                <DIV CLASS="paginate control_item"> 
     71                        {% paginate %} 
     72                </DIV> 
     73                {% for node in nodes %} 
     74                        <DIV class="node {% cycle 'odd' 'even' %}" id="node_{{node.id}}"> 
     75                                {% include 'graph/node_brief.html' %} 
     76                        </DIV> 
    877                {% endfor %} 
    9         </SELECT> 
    10         <SELECT name="filter_by_tag" onChange="dropdown_submit('filter_by_tag', this);"> 
    11                 <OPTION value="none">No filter</OPTION> 
    12                 {% for tag in tags %} 
    13                         <OPTION value="{{ tag.id }}" {% ifequal selected_tag tag.id %} selected {% endifequal %}>{{ tag.tag }}</OPTION> 
    14                 {% endfor %}  
    15         </SELECT> 
    16          
    17         <SELECT name="filter_by_interest" onChange="dropdown_submit('filter_by_interest', this);"> 
    18                 <OPTION value="none">No filter</OPTION> 
    19                 {% for interest in interests %} 
    20                         <OPTION value="{{ interest.id }}" {% ifequal selected_interest interest.id %} selected {% endifequal %}>{{ interest.label }}</OPTION> 
    21                 {% endfor %} 
    22         </SELECT> 
    23          
    24         <DIV> 
    25                 <SPAN class="letter {% ifequal selected_letter "none" %}selected {% endifequal %}" onClick="location.href = remove_get_parameter('filter_by_letter');">all</SPAN> 
    26                 {% for letter in letters %} 
    27                         <SPAN class="letter {% ifequal selected_letter letter %}selected{% endifequal %}" onClick="get_paramter_submit('filter_by_letter', '{{ letter }}');">{{ letter }}</SPAN> 
    28                 {% endfor %} 
     78 
     79                <DIV CLASS="paginate control_item"> 
     80                        {% paginate %} 
     81                </DIV> 
    2982        </DIV> 
    30 </DIV> 
     83</div>                   
     84                         
    3185 
    32 <DIV id="list_of_nodes"> 
    33         <DIV id="add_node"> 
    34                 {% if user.is_authenticated %} 
    35                         {% include 'graph/node_add.html' %} 
    36                 {% else %} 
    37                         Please <a href="{% url login %}?redirect_to={% url browse%}">login</a> to Add Listing. 
    38                 {% endif %} 
    39         </DIV> 
    40                  
    41         {% load pagination_tags %} 
    42         {% autopaginate nodes 10 %} 
    43          
    44         <DIV CLASS="paginate"> 
    45                 {% paginate %} 
    46         </DIV> 
    47          
    48         {% for node in nodes %} 
    49                 <DIV class="node {% cycle 'odd' 'even' %}" id="node_{{node.id}}"> 
    50                         {% include 'graph/node_brief.html' %} 
    51                 </DIV> 
    52         {% endfor %} 
    53          
    54         <DIV CLASS="paginate"> 
    55                 {% paginate %} 
    56         </DIV> 
    57  
    58 </DIV> 
    5986 
    6087{% comment %} 
    … …  
    6491{% endcomment %} 
    6592 
    66 </div> 
    67  

  • huginmunin/trunk/web/hm/app/templates/graph/node_brief.html

    r953 r967  
    11{% with node as n %} 
    22        {% if n %} 
    3         <P CLASS="r"> 
    4                 {% if n.typecasts %}{% for t in n.typecasts %}{{ t.type.label }} {% endfor %}{% endif %}</P> 
    5  
    6         <P> 
    7                 <SPAN CLASS="n"><A HREF="{{ n.absolute_url }}">{{ n.label }}</A> 
     3         
     4        <div CLASS="float_right">                
     5                <div class="browse_right"> 
     6                        {% if n.typecasts %}{% for t in n.typecasts %}{{ t.type.label }} {% endfor %}{% endif %} 
     7                </div>           
     8                <div class="browse_right">      {% if n.behaviors %}{{ n.behaviors|length }} review{{ n.behaviors|length|pluralize }} 
     9                                                                        {% else %}Write first review{% endif %} 
     10                </div> 
     11                <div class="browse_right">  
     12                        {% if n.aggregate_rating %}{{ n.aggregate_rating }}{% else %}Not yet rated{% endif %} 
     13                </div>                   
     14        </div> 
     15         
     16        <div class="float_left"> 
     17                <p CLASS="n"><A HREF="{{ n.absolute_url }}">{{ n.label }}</A> 
    818                        {% if user.is_superuser %} 
    919                                <SMALL> 
    … …  
    2333                        {% endif %} 
    2434                         
    25                 </SPAN> 
     35                </p> 
    2636                <SPAN CLASS="nn">{% if n.upcs %}{% for t in n.upcs %}{{ t.upc_code }} {% endfor %}{% endif %}</SPAN> 
    27         </P> 
    2837 
    29         <P CLASS="quote">{{ n.description|safe|truncatewords:11 }}</P> 
    30          
    31         <TABLE><TR> 
    32                 <TD CLASS="left">{% if n.behaviors %}{{ n.behaviors|length }} review{{ n.behaviors|length|pluralize }} 
    33                         {% else %}Write first review{% endif %}</TD> 
    34                 <TD CLASS="mid">{% if n.aggregate_rating %}{{ n.aggregate_rating }}{% else %}Not yet rated{% endif %}</TD> 
    35                 <TD CLASS="right">{% if n.tags %}{% for t in n.tags %}{{ t.tag }} {% endfor %}{% else %}Add a tag{% endif %}</TD> 
    36         </TR></TABLE> 
     38                <P CLASS="quote">{{ n.description|safe|truncatewords:10 }}</P> 
     39 
     40        </div> 
     41                         
    3742        {% endif %} 
    3843{% endwith %} 

  • huginmunin/trunk/web/hm/app/templates/login_menu.html

    r963 r967  
    99        </span> 
    1010         
    11         <span class="bubble_button menu"> 
     11        <span class="bubble_button large_button menu"> 
    1212                <a href="/Main/account/logout">                  
    13                         <img alt="logout" src="/Main/media/img/buttons/Logout.png"></a> 
     13                        <img class="large_button" alt="logout" src="/Main/media/img/buttons/Logout.png"></a> 
    1414                <a href="/Main/account/logout"> 
    15                         <img alt="Edit" src="/Main/media/img/buttons/Logout_Mouse_Over.png"></a> 
     15                        <img class="large_button" alt="Edit" src="/Main/media/img/buttons/Logout_Mouse_Over.png"></a> 
    1616        </span> 
    1717 
    … …  
    2020        <span class="bubble_button menu"> 
    2121                <a href="/Main/account/register">                        
    22                         <img alt="register" src="/Main/media/img/buttons/Register.png"></a> 
     22                        <img class="large_button" alt="register" src="/Main/media/img/buttons/Register.png"></a> 
    2323                <a href="/Main/account/register"> 
    24                         <img alt="Edit" src="/Main/media/img/buttons/Register_Mouse_Over.png"></a> 
     24                        <img class="large_button" alt="Edit" src="/Main/media/img/buttons/Register_Mouse_Over.png"></a> 
    2525        </span> 
    2626        <span class="bubble_button menu"> 
    27                 <a href="/Main/account/register">                        
    28                         <img alt="Register" src="/Main/media/img/buttons/Login.png"></a> 
     27                <a href="/Main/account/login">                   
     28                        <img class="large_button" alt="Register" src="/Main/media/img/buttons/Login.png"></a> 
    2929                <a href="/Main/account/login"> 
    30                         <img alt="Login" src="/Main/media/img/buttons/Login_Mouse_Over.png"></a> 
     30                        <img class="large_button" alt="Login" src="/Main/media/img/buttons/Login_Mouse_Over.png"></a> 
    3131        </span>  
    3232