fix app layouts: remove style tags from content fragments, use component classes
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
<link type="text/rcss" href="../../ui/layout.rcss"/>
|
||||
<script src="../../scripts/navigation.lua"></script>
|
||||
<script src="../../scripts/layout.lua"></script>
|
||||
<script src="browser.lua"></script>
|
||||
<title>Browser</title>
|
||||
<style>
|
||||
.browser-toolbar {
|
||||
@@ -30,12 +31,17 @@
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.browser-nav-btn:active {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.browser-nav-btn img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.browser-nav-btn.disabled img {
|
||||
.browser-nav-btn.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@@ -46,6 +52,11 @@
|
||||
padding: 10px 16px;
|
||||
background-color: #2D2D2D;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.browser-url-bar:hover {
|
||||
background-color: #3D3D3D;
|
||||
}
|
||||
|
||||
.browser-secure-icon {
|
||||
@@ -145,12 +156,14 @@
|
||||
|
||||
.browser-tab-btn:hover {
|
||||
color: #FFFFFF;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.browser-tab-btn img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-bottom: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.browser-tab-btn span {
|
||||
@@ -166,7 +179,7 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="app-screen" onload="initLayout(document)" data-model="browser">
|
||||
<body class="app-screen" onload="initLayout(document); initBrowser(document)" data-model="browser">
|
||||
<!-- System Status Bar -->
|
||||
<div class="system-status-bar">
|
||||
<span id="status-time" class="system-status-time">12:30</span>
|
||||
@@ -179,66 +192,52 @@
|
||||
|
||||
<!-- Browser Toolbar -->
|
||||
<div class="browser-toolbar">
|
||||
<div class="browser-nav-btn" onclick="goBack()">
|
||||
<div class="browser-nav-btn" onclick="browserBack()">
|
||||
<img src="../../icons/back.tga"/>
|
||||
</div>
|
||||
<div class="browser-nav-btn disabled">
|
||||
<div class="browser-nav-btn" onclick="browserForward()">
|
||||
<img src="../../icons/forward.tga"/>
|
||||
</div>
|
||||
<div class="browser-url-bar">
|
||||
<span class="browser-secure-icon">S</span>
|
||||
<input class="browser-url" type="text" value="example.com"/>
|
||||
<span class="browser-secure-icon" id="secure-icon">S</span>
|
||||
<input class="browser-url" type="text" value="example.com" id="url-input" onchange="onUrlSubmit()"/>
|
||||
</div>
|
||||
<div class="browser-nav-btn">
|
||||
<div class="browser-nav-btn" onclick="browserRefresh()">
|
||||
<img src="../../icons/refresh.tga"/>
|
||||
</div>
|
||||
<div class="browser-nav-btn">
|
||||
<div class="browser-nav-btn" onclick="showBrowserMenu()">
|
||||
<img src="../../icons/more.tga"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Browser Content -->
|
||||
<div class="browser-content">
|
||||
<div class="browser-content" id="browser-content">
|
||||
<div class="browser-page">
|
||||
<div class="browser-page-title">Example Domain</div>
|
||||
<div class="browser-page-title" id="page-title">Example Domain</div>
|
||||
<div class="browser-page-text">
|
||||
This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.
|
||||
</div>
|
||||
<div class="browser-page-text">
|
||||
<span class="browser-page-link">More information...</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 32px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
|
||||
<div class="browser-page-title" style="font-size: 18px;">Related Links</div>
|
||||
<div class="browser-search-item">
|
||||
<div class="browser-search-title">IANA - IANA-managed Reserved Domains</div>
|
||||
<div class="browser-search-url">www.iana.org > domains > reserved</div>
|
||||
<div class="browser-search-desc">Certain domains are set aside and unavailable for registration.</div>
|
||||
</div>
|
||||
<div class="browser-search-item">
|
||||
<div class="browser-search-title">RFC 2606 - Reserved Top Level DNS Names</div>
|
||||
<div class="browser-search-url">tools.ietf.org > html > rfc2606</div>
|
||||
<div class="browser-search-desc">This document describes domain names reserved for documentation.</div>
|
||||
</div>
|
||||
<span class="browser-page-link" onclick="navigateToUrl('iana.org')">More information...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<div class="browser-bottom-bar">
|
||||
<div class="browser-tab-btn" onclick="goHome()">
|
||||
<div class="browser-tab-btn" onclick="browserHome()">
|
||||
<img src="../../icons/home.tga"/>
|
||||
<span>Home</span>
|
||||
</div>
|
||||
<div class="browser-tab-btn">
|
||||
<span class="browser-tabs-indicator">1</span>
|
||||
<div class="browser-tab-btn" onclick="showTabs()">
|
||||
<span class="browser-tabs-indicator" id="tab-count">1</span>
|
||||
<span>Tabs</span>
|
||||
</div>
|
||||
<div class="browser-tab-btn">
|
||||
<div class="browser-tab-btn" onclick="newTab()">
|
||||
<img src="../../icons/add.tga"/>
|
||||
<span>New Tab</span>
|
||||
</div>
|
||||
<div class="browser-tab-btn">
|
||||
<div class="browser-tab-btn" onclick="showBrowserMenu()">
|
||||
<img src="../../icons/menu.tga"/>
|
||||
<span>Menu</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user