Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Window can be as skinny as 480px wide on Windows now without issues.
Browse files Browse the repository at this point in the history
Works well with URL bar always showing and also with title mode.
  • Loading branch information
bsclifton committed Sep 20, 2016
1 parent c0240a5 commit 75365f0
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 19 deletions.
2 changes: 1 addition & 1 deletion js/stores/appStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ function windowDefaults () {
show: false,
width: appState.get('defaultWindowWidth'),
height: appState.get('defaultWindowHeight'),
minWidth: isWindows ? 640 : 480, // Windows has caption buttons (min/max/close) which take extra space
minWidth: 480,
minHeight: 300,
minModalHeight: 100,
minModalWidth: 100,
Expand Down
48 changes: 31 additions & 17 deletions less/navigationBar.less
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,40 @@
- (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
}

// (Windows) Add extra padding to have spacing match the close button
.platform--win32 .navigatorWrapper {
margin-left: @navbarLeftMarginWindows;
}
// (Windows) Style adjustments needed for slim titlebar to work properly
.platform--win32 div#window.frameless {
border: 1px solid #000;
box-sizing: border-box;
}
// (Windows) Extension button not clickable unless it has no-drag
.platform--win32 .extensionButton {
-webkit-app-region: no-drag !important;
}
// (Windows) remove margin next to brave button when lower than 720px
.platform--win32 .navigatorWrapper .topLevelEndButtons {
@media (max-width: @windowsMinimumViewport) {
margin-left: 0;
// Windows specific fixes
.platform--win32 {
.navigatorWrapper {
margin-left: @navbarLeftMarginWindows;
}

div#window.frameless {
border: 1px solid #000;
box-sizing: border-box;
}

// Extension button not clickable unless it has no-drag
.extensionButton {
-webkit-app-region: no-drag !important;
}

// changes to ensure window can be as small as 480px wide
// and still be useable and have the caption buttons intact
@media (max-width: @breakpointExtensionButtonPadding) {
.navigatorWrapper .topLevelEndButtons {
margin-left: 0;
}
}
@media (max-width: @breakpointSmallWin32) {
.loadTime { display: none; }
#urlInput { max-width: 75px; }
#titleBar { width: 100px; }
}
@media (max-width: @breakpointTinyWin32) {
#urlInput { max-width: 50px; }
}
}

// Styles had to be reworked to properly position the new caption buttons for Windows
.navbarCaptionButtonContainer {
display: flex;
border-bottom: 1px solid #aaaaaa;
Expand Down
4 changes: 3 additions & 1 deletion less/variables.less
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,9 @@
@zindexWindowFullScreenBanner: 4100;

@breakpointNarrowViewport: 600px;
@windowsMinimumViewport: 720px;
@breakpointExtensionButtonPadding: 720px;
@breakpointSmallWin32: 650px;
@breakpointTinyWin32: 500px;
@transitionDuration: 100ms;

@transition: all 600ms linear;
Expand Down

0 comments on commit 75365f0

Please sign in to comment.