Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] Support mobile devices #176

Merged
merged 19 commits into from
Aug 1, 2016
Merged

[FEATURE] Support mobile devices #176

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
62b76f1
add mobile media query
thatkookooguy Jul 25, 2016
7bb458a
Merge branch 'master' into feature-fun-with-mobile
thatkookooguy Jul 25, 2016
e0a62ab
hound fix
thatkookooguy Jul 25, 2016
4a94932
more hound fixes
thatkookooguy Jul 25, 2016
9f62e7a
some fixes
thatkookooguy Jul 25, 2016
50fc165
add left border
thatkookooguy Jul 25, 2016
1b36c37
some more nits
thatkookooguy Jul 25, 2016
13e8e09
disable important linter since we got to override inline styling
thatkookooguy Jul 26, 2016
83a13f5
add sidebar open close on specific events
thatkookooguy Jul 27, 2016
7dbce38
fix modal positioning for mobile
thatkookooguy Jul 27, 2016
9303630
more little tweaks for mobile
thatkookooguy Jul 27, 2016
a6c040f
little nits
thatkookooguy Jul 27, 2016
9b6d405
Merge remote-tracking branch 'origin/master' into feature-fun-with-mo…
thatkookooguy Jul 31, 2016
e584e1a
fix some general lint mistakes
thatkookooguy Aug 1, 2016
ca36437
make phone version for font viewer
thatkookooguy Aug 1, 2016
1ea892e
hound fixes
thatkookooguy Aug 1, 2016
d7640b9
make menu icon morph into back arrow
thatkookooguy Aug 1, 2016
0e22bf9
good boy, hound!
thatkookooguy Aug 1, 2016
2a755df
add some comments for clearification
thatkookooguy Aug 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/app/components/menuBar/menuBarTemplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@
<div>
<h2 class="md-toolbar-tools">{{main.projectFolderPath}}</h2>
<md-menu-bar>
<button class="hamburger" ng-click="main.isSidebarOpen = !main.isSidebarOpen">
<i class="material-icons">menu</i>
</button>
<md-menu>
<button ng-click="$mdOpenMenu()">
File
Expand Down
1 change: 1 addition & 0 deletions public/app/controllers/mainCtrl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ angular.module('kibibitCodeEditor')

vm.openFile = '';
vm.openProject = {};
vm.isSidebarOpen = false;

vm.settings = SettingsService.settings;

Expand Down
32 changes: 20 additions & 12 deletions public/app/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,21 +36,29 @@
<div ui-layout-container size="104px" class="menu-bar-container">
<kb-menu-bar></kb-menu-bar>
</div>

<div class="mobile-sidebar" ng-class="{'open': main.isSidebarOpen}" ng-scrollbars>
<kb-file-tree
kb-file-tree-path="main.projectFolderPath"
kb-file-tree-selection="main.openFile">
</kb-file-tree>
<button class="close" ng-click="main.isSidebarOpen = !main.isSidebarOpen">
<i class="material-icons">close</i>
</button>
</div>
<div ui-layout-container="central" style="z-index: 6;">
<div ui-layout="{ flow : 'column', dividerSize: '10' }">
<div ui-layout-container class="sidebar-container" size="20%">
<div class="sidebar" ng-scrollbars>
<kb-file-tree
kb-file-tree-path="main.projectFolderPath"
kb-file-tree-selection="main.openFile">
</kb-file-tree>
<div ui-layout-container class="sidebar-container" size="20%">
<div class="sidebar" ng-scrollbars>
<kb-file-tree
kb-file-tree-path="main.projectFolderPath"
kb-file-tree-selection="main.openFile">
</kb-file-tree>
</div>
</div>
<div ui-layout-container class="main-view-container">
<div class="tabs"></div>
<div class="main-view" ng-view></div>
</div>
</div>
<div ui-layout-container class="main-view-container">
<div class="tabs"></div>
<div class="main-view" ng-view></div>
</div>
</div>
</div>
<div ui-layout-container size="30px" class="status-bar">
Expand Down
4 changes: 4 additions & 0 deletions public/assets/sass/_components/_searchProject.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ kb-search-project {
padding: 0;
position: relative;

@include phone {
display: none;
}

.search-btn {
background-color: transparent;
border: 0;
Expand Down
58 changes: 58 additions & 0 deletions public/assets/sass/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,15 @@ $color1: rgb(70, 70, 70);
$color2: #808080;
$color3: rgb(38, 38, 38);

$tablet-width: 768px;
$desktop-width: 1024px;

@mixin phone {
@media (max-width: #{$tablet-width - 1px}) {
@content;
}
}

.main-app-container {
opacity: 0;
transition: opacity 0.5s ease;
Expand Down Expand Up @@ -104,6 +113,55 @@ body,
flex-direction: column;
flex-wrap: nowrap;
overflow: hidden;

@include phone {
bottom: 0;
left: 0 !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

position: absolute;
right: 0;
top: 0;
width: 100% !important;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!important should not be used

z-index: 90;
}
}

.hamburger {
display: none;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered color, display, fill


@include phone {
display: inline-block;
position: relative;
top: 9px;
}
}

.mobile-sidebar {
display: none;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered color, display


@include phone {
background: $color1;
bottom: 0;
display: block;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Properties should be ordered background, bottom, display, left, position, top, transform, transition, width, z-index

left: 0;
position: absolute;
top: 0;
transform: translateX(-100vw);
transition: all linear 250ms;
width: 100vw;
z-index: 91;

&.open {
transform: none;
}

.close {
color: $primary;
padding: 5px;
position: absolute;
right: 10px;
top: 10px;
}
}
}

.tabs {
Expand Down