finished up sharvari's list for current tabs

This commit is contained in:
Karen 2012-11-28 20:00:42 +05:30
parent 675f418b13
commit be63f24794
5 changed files with 60 additions and 71 deletions

View File

@ -151,12 +151,12 @@ margin-left: 10px;
margin-top: 4px;
}
.productionEachText {
.productionEachTextA {
padding-left: 20px;
width: 350px;
width: 330px;
}
.productionEachImg, .productionEachText {
.productionEachImg, .productionEachTextA {
float: left;
}

View File

@ -68,12 +68,11 @@ font-weight:bold;
.tooltip {
position: absolute;
left: 30px;
left: 0px;
top: 15px;
background: #F7BD00;
border: 3px solid #F7BD00;
padding: 6px;
border-radius: 8px;
color: #fff;
background-color: #fff;
width: 156px;
opacity: 0;
visibility: hidden;
@ -83,9 +82,9 @@ font-weight:bold;
transition: all 0.2s ease-in;
}
.tooltip:after {
/*.tooltip:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
display:block;
position:absolute;
top:0px;
left:-15px;
@ -93,7 +92,7 @@ font-weight:bold;
border-width:14px 0 0 22px;
border-style:solid;
border-color:#F7BD00 transparent;
}
}*/
.tooltipLink:hover .tooltip {
opacity: 1;

View File

@ -2,7 +2,7 @@
<ul class="tabsInnerRight">
<li><a href="#about">About</a></li>
<li><a href="#connections">Productions</a></li>
<li><a href="#connections">Connections</a></li>
<li><a href="#plays">Plays &amp; more</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#resources">Resources</a></li>
@ -68,7 +68,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: admin)</div>
@ -82,7 +82,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: fan of)</div>
@ -96,7 +96,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: member of)</div>
@ -110,7 +110,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group</div>
@ -133,7 +133,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Group</a>
<div>Location</div>
<div>Relationship to Group (e.g. admin)</div>
@ -147,7 +147,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</div>
@ -162,7 +162,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</div>
@ -176,7 +176,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Location</div>
<div>Relationship to Group (e.g. admin)</div>
@ -195,15 +195,15 @@
</div> <!-- end connections -->
<div id="plays" class="tab_content">
<h3 class="orange">Productions</h3>
<h3 class="orange">Connections</h3>
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></div>
<div>No. of shows: 50</div>
@ -217,8 +217,8 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></div>
<div>No. of shows: 50</div>
@ -232,8 +232,8 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></div>
<div>No. of shows: 50</div>
@ -247,8 +247,8 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></div>
<div>No. of shows: 50</div>
@ -268,7 +268,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of workshops</div>
<div><em>One line desc</em></div>
<div>Current</div>
@ -282,7 +282,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of workshops</div>
<div><em>One line desc</em></div>
</div>
@ -304,7 +304,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of activity (talk, whatever)</div>
<div><em>One line desc</em></div>
<div>Current</div>
@ -318,7 +318,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<div class="orangeInnerRight">Name of activity (talk, whatever)</div>
<div><em>One line desc</em></div>
<div>Current</div>

View File

@ -91,7 +91,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Group</a>
<div>Location</div>
<div>Relationship to Group</div>
@ -105,7 +105,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Group</a>
<div>Location</div>
<div>Relationship to Group</div>
@ -119,7 +119,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Group</a>
<div>Location</div>
<div>Relationship to Group</div>
@ -140,7 +140,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</div>
@ -154,7 +154,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</div>
@ -168,7 +168,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</div>
@ -195,7 +195,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></div>
@ -209,7 +209,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></div>
@ -223,7 +223,7 @@
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></div>

View File

@ -1,12 +1,5 @@
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />
<style type="text/css">
.productionEachImg {
float: right;
}
</style>
<script>
$(function() {
$('.toggleLink').click(function(e) {
@ -78,7 +71,7 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="" class="tooltipLink">Name of Production (2010)
<span class="tooltip">
<div>
@ -90,7 +83,6 @@ $(function() {
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<p>Current(icon) or Upcoming (icon)<span style="color:red">Please provide icon- I'll place it after title - Karen</span></p>
</div>
<div class="clear"></div>
@ -101,7 +93,7 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div>Some copy here</div>
@ -115,7 +107,7 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div>Some copy here</div>
@ -133,12 +125,11 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<div>Current(icon) or Upcoming (icon)</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
@ -148,12 +139,11 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<div>Current(icon) or Upcoming (icon)</div>
</div>
<div class="clear"></div>
@ -162,19 +152,19 @@ $(function() {
</div> <!-- end productions -->
<div id="people" class="tab_content">
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Writer: Some script</div>
<div>Translation of script by playwright</div>
<div>From language to language</div>
<a href="" class="toggleLink orange">Synopsis</a>
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
<div class="toggleDiv">Lorem ipsum</div>
</div>
<div class="clear"></div>
@ -186,13 +176,13 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Writer: Some script</div>
<div>Translation of script by playwright</div>
<div>From language to language</div>
<a href="" class="toggleLink orange">Synopsis</a>
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
<div class="toggleDiv">Lorem ipsum</div>
</div>
<div class="clear"></div>
@ -204,13 +194,13 @@ $(function() {
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="productionEachTextA">
<a href="">Name of Person</a>
<div>Writer: Some script</div>
<div>Translation of script by playwright</div>
<div>From language to language</div>
<a href="" class="toggleLink orange">Synopsis</a>
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
<div class="toggleDiv">Lorem ipsum</div>
</div>
<div class="clear"></div>
@ -260,8 +250,8 @@ $(function() {
<div class="resourcesBlock">
<div class="resourcesEach">
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><strong>Title</strong></div>
<div>Two-three line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -274,8 +264,8 @@ $(function() {
<div class="resourcesBlock">
<div class="resourcesEach">
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><strong>Title</strong></div>
<div>Two-three line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -288,8 +278,8 @@ $(function() {
<div class="resourcesBlock">
<div class="resourcesEach">
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><strong>Title</strong></div>
<div>Two-three line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -302,8 +292,8 @@ $(function() {
<div class="resourcesBlock">
<div class="resourcesEach">
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><strong>Title</strong></div>
<div>Two-three line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>