twisterarmy
/
twister-html
mirror of https://github.com/twisterarmy/twister-html.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #15 from dionyziz/visual_fixes 

Visual fixes
master
miguelfreitas 11 years ago
parent
e20e6b8623 a772fcbc74
commit
3112c522b1
6 changed files with 1714 additions and 1701 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 190
      css/profile.css
  2. 1300
      css/style.css
  3. 4
      following.html
  4. 4
      home.html
  5. 11
      interface_common.js
  6. 2
      login.html

190
css/profile.css
Unescape View File

@ -3,208 +3,212 @@
***************************************/ ***************************************/
.profile-card .profile-card
{ {
margin: 0 0 10px 335px; margin: 0 0 10px 335px;
padding: 7px; padding: 7px;
background: rgba( 255, 255, 255, .5 ); background: rgba( 255, 255, 255, .5 );
border: solid 1px rgba( 69, 71, 77, .05 ); border: solid 1px rgba( 69, 71, 77, .05 );
position: relative; position: relative;
} }
.profile-card-main .profile-card-main
{ {
width: 520px; width: 520px;
height: 280px; height: 280px;
text-align: center; text-align: center;
position: relative; position: relative;
transition: all .2s linear; transition: all .2s linear;
} }
.profile-card-main:before .profile-card-main:before
{ {
content: ""; content: "";
border: solid 0px #fff; border: solid 0px #fff;
transition: all .2s linear; transition: all .2s linear;
position: absolute; position: absolute;
left: 1px; left: 1px;
top: 1px; top: 1px;
right: 1px; right: 1px;
bottom: 1px; bottom: 1px;
z-index: 0; z-index: 0;
} }
.profile-card-main * .profile-card-main *
{ {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.profile-card-photo .profile-card-photo
{ {
width: 74px; width: 74px;
height: 74px; height: 74px;
margin: 20px auto 5px auto; margin: 20px auto 5px auto;
border-radius: 15%; border-radius: 15%;
border: solid 5px #fff; border: solid 5px #fff;
box-sizing: content-box; box-sizing: content-box;
} }
.profile-card-main h1 .profile-card-main h1
{ {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
} }
.profile-card-main h2 .profile-card-main h2
{ {
color: #fff; color: #fff;
} }
.profile-card .direct-messages, .profile-card .direct-messages,
.profile-card .direct-messages-with-user, .profile-card .direct-messages-with-user,
.profile-card .follow .profile-card .follow
{ {
display: block; display: block;
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 10px; right: 10px;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
width: 120px; width: 120px;
text-align: center; text-align: center;
color: rgba( 0, 0, 0, .7 ); color: rgba( 0, 0, 0, .7 );
background: rgba( 0, 0, 0, .1 ); background: rgba( 0, 0, 0, .1 );
border: none; border: none;
transition: all .2s linear; transition: all .2s linear;
} }
.profile-card .follow .profile-card .follow
{ {
right: 135px; right: 135px;
} }
.profile-card .direct-messages:hover, .profile-card .direct-messages:hover,
.profile-card .direct-messages-with-user:hover, .profile-card .direct-messages-with-user:hover,
.profile-card .follow:hover .profile-card .follow:hover
{ {
background: rgba( 0, 0, 0, .3 ); background: rgba( 0, 0, 0, .3 );
} }
.profile-card.forEdition .profile-card.forEdition
{ {
margin: 0 auto; margin: 0 auto;
width: 540px; width: 540px;
} }
.forEdition .profile-card-photo .forEdition .profile-card-photo
{ {
border: solid 2px #fff; border: solid 2px #fff;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
transition: all .2s linear; transition: all .2s linear;
} }
.forEdition .profile-card-main:hover:after, .forEdition .profile-card-main:hover:after,
.forEdition .profile-card-photo:after .forEdition .profile-card-photo:after
{ {
content: ""; content: "";
width: 36px; width: 36px;
height: 36px; height: 36px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
background: url(../img/edit.png) no-repeat right top; background: url(../img/edit.png) no-repeat right top;
} }
.forEdition .profile-card-main:hover:before .forEdition .profile-card-main:hover:before
{ {
border: solid 5px #fff; border: solid 5px #fff;
} }
.forEdition .profile-card-main h2 .forEdition .profile-card-main h2
{ {
margin-bottom: 8px; margin-bottom: 8px;
} }
.forEdition .profile-card-main input .forEdition .profile-card-main input
{ {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
background: rgba( 0, 0, 0, .1 ); background: rgba( 0, 0, 0, .1 );
border: none; border: none;
padding: 6px 4px; padding: 6px 4px;
color: #fff; color: #fff;
margin-bottom: 4px; margin-bottom: 4px;
text-align: center; text-align: center;
transition: all .2s linear; transition: all .2s linear;
} }
.forEdition .profile-card-main input:hover, .forEdition .profile-card-main input:hover,
.forEdition .profile-card-main input:focus, .forEdition .profile-card-main input:focus,
.forEdition .profile-card-photo:hover .forEdition .profile-card-photo:hover
{ {
background: rgba( 0, 0, 0, .3 ); background: rgba( 0, 0, 0, .3 );
} }
.input-description .input-description
{ {
width: 90%; width: 90%;
} }
.input-name .input-name
{ {
font-size: 20px; font-size: 20px;
} }
.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-website,
.forEdition .profile-card-main .input-city .forEdition .profile-card-main .input-city
{ {
display: inline-block; display: inline-block;
} }
.profile-edition-buttons .profile-edition-buttons
{ {
padding: 10px; padding: 10px;
text-align: right; text-align: right;
} }
/************************************* /*************************************
****************** PROFILE MODAL ****************** PROFILE MODAL
**************************************/ **************************************/
.profile-modal .modal-wrapper .profile-modal .modal-wrapper
{ {
width: 528px; width: 528px;
height: 590px; height: 590px;
margin: -300px 0 0 -264px; margin: -300px 0 0 -264px;
overflow: hidden; overflow: hidden;
} }
.profile-modal .modal-content .profile-modal .modal-content
{ {
padding: 3px; padding: 3px;
} }
.profile-modal .profile-data .profile-modal .profile-data
{ {
display: inline-block; display: inline-block;
} }
.profile-modal .postboard .profile-modal .postboard
{ {
margin-left: 0; margin-left: 0;
padding: 5px 0 5px 0; padding: 5px 0 5px 0;
} }
.profile-modal .postboard h2 .profile-modal .postboard h2
{ {
width: auto; width: auto;
} }
.profile-modal .postboard-posts .profile-modal .postboard-posts
{ {
height: 240px; height: 240px;
overflow: auto; overflow: auto;
} }
.profile-modal .profile-card-main .profile-modal .profile-card-main
{ {
background: #45474d; background: #45474d;
color: white;
}
.profile-modal .profile-card-main a {
color: #8bb9e0;
} }
.profile-modal .postboard-posts .post .profile-modal .postboard-posts .post
{ {
padding: 5px; padding: 5px;
} }
.profile-modal .post-interactions .profile-modal .post-interactions
{ {
margin: 2px 10px 3px 60px; margin: 2px 10px 3px 60px;
} }
.profile-modal .profile-card .profile-modal .profile-card
{ {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* /*
.profile-card-main .profile-card-main
{ {
height: 200px; height: 200px;
} }
*/ */
.profile-modal .direct-messages, .profile-modal .direct-messages,
.profile-modal .direct-messages-with-user, .profile-modal .direct-messages-with-user,
.profile-modal .follow .profile-modal .follow
{ {
bottom: 10px; bottom: 10px;
} }

1300
css/style.css
View File

File diff suppressed because it is too large Load Diff

4
following.html
Unescape View File

@ -167,7 +167,7 @@
<div class="followers">Followed by <div class="followers">Followed by
<span class="followed-by"></span> <span class="followed-by"></span>
</div> </div>
<a class="twister-user-remove">X</a> <a class="twister-user-remove">&times;</a>
<button class="follow">Follow</button> <button class="follow">Follow</button>
</div> </div>
</li> </li>
@ -251,7 +251,7 @@
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-header"> <div class="modal-header">
<h3></h3> <h3></h3>
<span id="closeModal" class="modal-close cancel">X</span> <span id="closeModal" class="modal-close cancel">&times;</span>
</div> </div>
<div class="modal-content"></div> <div class="modal-content"></div>
<div class="modal-buttons"> <div class="modal-buttons">

4
home.html
Unescape View File

@ -174,7 +174,7 @@
<div class="followers">Followed by <div class="followers">Followed by
<span class="followed-by"></span> <span class="followed-by"></span>
</div> </div>
<a class="twister-user-remove">X</a> <a class="twister-user-remove">&times;</a>
<button class="follow">Follow</button> <button class="follow">Follow</button>
</div> </div>
</li> </li>
@ -258,7 +258,7 @@
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-header"> <div class="modal-header">
<h3></h3> <h3></h3>
<span id="closeModal" class="modal-close cancel">X</span> <span id="closeModal" class="modal-close cancel">&times;</span>
</div> </div>
<div class="modal-content"></div> <div class="modal-content"></div>
<div class="modal-buttons"> <div class="modal-buttons">

11
interface_common.js
Unescape View File

@ -32,14 +32,15 @@ function openModal( modalClass )
function closeModal($this) function closeModal($this)
{ {
var $body = $( "body" ); var $body = $( "body" );
var $modalWindow = $this.parents( ".modal-blackout" ); var $modalWindows = $( "body" ).children( ".modal-blackout" );
$modalWindow.fadeOut( "fast", function()
$modalWindows.fadeOut( "fast", function()
{ {
$modalWindow.detach(); $modalWindows.detach();
}); });
$body.css({ $body.css({
"overflow": "auto", "overflow": "auto",
"margin-right": "0" "margin-right": "0"
}); });
} }
@ -446,7 +447,7 @@ var retweetSubmit = function(e)
function initInterfaceCommon() { function initInterfaceCommon() {
$("body").on( "click", ".cancel" , function() { closeModal($(this)); } ); $( "body, .cancel, .modal-blackout" ).on( "click", function() { closeModal($(this)); } );
$( ".post-reply" ).bind( "click", postReplyClick ); $( ".post-reply" ).bind( "click", postReplyClick );
$( ".post-propagate" ).bind( "click", reTwistPopup ); $( ".post-propagate" ).bind( "click", reTwistPopup );
$( ".userMenu-config-dropdown" ).bind( "click", dropDownMenu ); $( ".userMenu-config-dropdown" ).bind( "click", dropDownMenu );

2
login.html
Unescape View File

@ -101,7 +101,7 @@
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-header"> <div class="modal-header">
<h3></h3> <h3></h3>
<span id="closeModal" class="modal-close cancel">X</span> <span id="closeModal" class="modal-close cancel">&times;</span>
</div> </div>
<div class="modal-content"></div> <div class="modal-content"></div>
<div class="modal-buttons"> <div class="modal-buttons">

Write Preview
Loading…
Cancel
Save