THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

two-column-mode: Enhance UI

next
Suwon Chae 1 year ago
parent
commit
d0c14349f9
3 changed files with 86 additions and 17 deletions
  1. +45
    -5
      app/assets/stylesheets/less/_page.less
  2. +3
    -1
      app/views/common/twoColumnModeCheckboxArea.scala.html
  3. +38
    -11
      public/javascripts/service/yona.twoColumnMode.js

+ 45
- 5
app/assets/stylesheets/less/_page.less View File

@ -6713,9 +6713,9 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
}
#option_form > .board-labels {
width: 400px;
min-width: 120px;
display: inline-block;
dt {
display: none;
}
@ -6724,12 +6724,14 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
.post-list{
.search-wrap {
& form {
width: 90%;
.search-bar {
height: 22px;
width: 400px;
display: inline-block;
margin-right: 10px;
.textbox {
width: inherit;
}
}
.select2-container {
height: 32px;
@ -7087,8 +7089,9 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
.two-column-icon {
display: inline-block;
line-height: 30px;
line-height: 37px;
margin-left: 10px;
i {
font-size: 16px;
margin-right: 5px;
@ -7096,10 +7099,47 @@ div.diff-body[data-outdated="true"] tr:hover .icon-comment {
}
label {
padding-top: 7px;
padding-top: 4px;
padding-left: 0;
}
#two-column-mode {
float: none;
margin: 4px 4px 0 2px;
vertical-align: top;
}
.two-column-icon-border {
color: #03a9f4;
border: 1px solid #03afff;
border-radius: 3px;
padding: 3px 3px 0 3px;
&:hover {
background-color: #03afff;
color: #fff0ff;
.two-column-mode-text {
color: #fff0ff;
}
}
}
}
.two-column-icon-selected {
background-color: #aee5ff;
.two-column-mode-text {
color: #0293d6;
}
}
.two-column-mode-text {
padding: 0 4px 0 0;
line-height: 20px;
vertical-align: text-bottom;
}
.absoluteAndLeftMargin {
position: absolute;
margin-left: 260px;

+ 3
- 1
app/views/common/twoColumnModeCheckboxArea.scala.html View File

@ -8,6 +8,8 @@
<div class="two-column-icon mr10 hide-in-mobile" id="two-column-mode-checkbox" title='@Messages("common.two.column.mode")' data-content='@Messages("common.two.column.mode.desc")'>
<label class="checkbox">
<input id="two-column-mode" type="checkbox"> <i class="yobicon-explorerwindow"></i>
<div class="two-column-icon-border">
<input id="two-column-mode" type="checkbox"><span class="two-column-mode-text">Column View</span>
</div>
</label>
</div>

+ 38
- 11
public/javascripts/service/yona.twoColumnMode.js View File

@ -5,12 +5,23 @@
* https://yona.io
**/
var lastClicked = "";
var mainWidth = "";
var isLeftMenuHide = false;
function _initTwoColumnMode(){
var $twoColumnMode = $("#two-column-mode");
var useTwoColumnMode = localStorage.getItem('useTwoColumnMode');
var $title = $('.title');
var $projectPageWrap = $('.project-page-wrap');
if (mainWidth === "") {
mainWidth = $projectPageWrap.css("width");
}
if( isLeftMenuHide ) {
$(".left-menu").hide(0);
}
$('#two-column-mode-checkbox').popover({trigger: "hover", placement: "top", delay: { show: 100, hide: 100 }});
// when to check box click
@ -21,10 +32,12 @@ function _initTwoColumnMode(){
if( useTwoColumnMode === 'true'){
attachPageSlideEvent($twoColumnMode, $title);
bindFrameLoading();
$(".two-column-icon-border").addClass("two-column-icon-selected");
} else {
$twoColumnMode.prop('checked', false);
$('.post-item').css("cursor", "");
unbindEvents();
$(".two-column-icon-border").removeClass("two-column-icon-selected");
}
$twoColumnMode.on('click', function () {
@ -32,9 +45,11 @@ function _initTwoColumnMode(){
localStorage.setItem('useTwoColumnMode', true);
attachPageSlideEvent($twoColumnMode, $title);
bindFrameLoading();
$(".two-column-icon-border").addClass("two-column-icon-selected");
} else {
localStorage.setItem('useTwoColumnMode', false);
$('.post-item').removeClass('highlightBg').css("cursor", "");
$(".two-column-icon-border").removeClass("two-column-icon-selected");
unbindEvents();
}
});
@ -44,7 +59,7 @@ function _initTwoColumnMode(){
function attachPageSlideEvent(twoColumnMode, title){
twoColumnMode.prop('checked', true);
title.pageslide({direction: "left", speed: 0});
title.pageslide({direction: "left", speed: 0, modal: true});
$('.post-item').css("cursor", "pointer");
title.on('click.changeUrlWhenClick', function(e){
@ -61,6 +76,8 @@ function _initTwoColumnMode(){
$title.unbind('click.pageslide');
$title.unbind('click.iframeLoading');
$title.unbind('click.changeUrlWhenClick');
revokeMarginOfMainPage();
$.pageslide.close();
}
function bindFrameLoading() {
@ -68,18 +85,12 @@ function _initTwoColumnMode(){
$('.post-item').removeClass('highlightBg');
$(this).closest('.post-item').addClass('highlightBg');
if(lastClicked === this){
if($('#pageslide').is(":visible")){
$(".left-menu").hide(0);
}
NProgress.done();
return;
} else {
lastClicked = this;
}
if($('#pageslide').is(":visible")){
$(".left-menu").hide(0);
isLeftMenuHide = true;
reduceMarginOfMainPage();
} else {
revokeMarginOfMainPage();
}
setTimeout(function () {
$('#pageslide > iframe').ready(function () {
@ -88,4 +99,20 @@ function _initTwoColumnMode(){
}, 100);
});
}
function reduceMarginOfMainPage() {
var $projectPageWrap = $('.project-page-wrap');
$projectPageWrap.css("margin", "20px 10px 0").css("width", "55%");
$(".project-header-wrap").css("margin", "0 10px");
$(".project-menu-inner").css("margin", "0 10px")
}
function revokeMarginOfMainPage() {
var $projectPageWrap = $('.project-page-wrap');
$projectPageWrap.css("margin", "20px auto 0").css("width", mainWidth);
$(".project-header-wrap").css("margin", "0 auto");
$(".project-menu-inner").css("margin", "0 auto");
}
}

Loading…
Cancel
Save