Move Documentation and Support links to separate tab. Add a

contributing section.  Unify help/landing section CSS/html a little.
Expand the sponsors panel area in preparation for an updated section.
pull/3/head
Dominic Clifton 10 years ago
parent 432d9f0720
commit c3f1c13d54

@ -62,6 +62,9 @@
"tabLanding": {
"message": "Welcome"
},
"tabHelp": {
"message": "Documentation & Support"
},
"tabSetup": {
"message": "Setup"
@ -210,6 +213,12 @@
"defaultWelcomeText": {
"message": "Welcome to <strong>Cleanflight - Configurator</strong>, a utility designed to simplify updating, configuring and tuning of your flight controller.<br /><br />The application supports all hardware that can run cleanflight (sparky, cc3d, acro naze, naze, afromini, flip32, flip32+, cjmcu, chebuzz f3, stm32f3discovery, naze32pro, etc)<br /><br />The firmware source code can be downloaded from <a href=\"https://github.com/cleanflight/cleanflight\" title=\"www.github.com\" target=\"_blank\">here</a><br />The newest binary firmware image is available <a href=\"https://github.com/cleanflight/cleanflight/releases\" title=\"www.github.com\" target=\"_blank\">here</a><br /><br />Latest <strong>CP210x Drivers</strong> can be downloaded from <a href=\"http://www.silabs.com/products/mcu/pages/usbtouartbridgevcpdrivers.aspx\" title=\"http://www.silabs.com/\" target=\"_blank\">here</a><br />"
},
"defaultContributingHead": {
"message": "Contributing"
},
"defaultContributingText": {
"message": "If you would like to help make Cleanflight even better you can help in many ways, including:<br /><ul><li>Answering other users questions on the forums and IRC.</li><li>Contributing code to the firmware and configurator - new features, fixes, improvements</li><li>Testing <a href=\"https://github.com/cleanflight/cleanflight/pulls\" target=\"_blank\">new features/fixes</a> and providing feedback.</li><li>Helping out with <a href=\"https://github.com/cleanflight/cleanflight/issues\" target=\"_blank\">issues and commenting on feature requests</a>.</li></ul>"
},
"defaultChangelogHead": {
"message": "Configurator - Changelog"
},

@ -15,7 +15,8 @@ var GUI_control = function () {
this.timeout_array = [];
this.defaultAllowedTabsWhenDisconnected = [
'landing',
'firmware_flasher'
'firmware_flasher',
'help'
];
this.defaultAllowedTabsWhenConnected = [
'adjustments',

@ -11,6 +11,7 @@
<link type="text/css" rel="stylesheet" href="./tabs/landing.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/setup.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/help.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/ports.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/configuration.css" media="all" />
<link type="text/css" rel="stylesheet" href="./tabs/pid_tuning.css" media="all" />
@ -57,6 +58,7 @@
<script type="text/javascript" src="./tabs/landing.js"></script>
<script type="text/javascript" src="./tabs/setup.js"></script>
<script type="text/javascript" src="./tabs/help.js"></script>
<script type="text/javascript" src="./tabs/ports.js"></script>
<script type="text/javascript" src="./tabs/configuration.js"></script>
<script type="text/javascript" src="./tabs/pid_tuning.js"></script>
@ -133,6 +135,7 @@
<div id="tabs">
<ul class="mode-disconnected">
<li class="tab_landing"><a href="#" i18n="tabLanding"></a></li>
<li class="tab_help"><a href="#" i18n="tabHelp"></a></li>
<li class="tab_firmware_flasher "><a href="#" i18n="tabFirmwareFlasher"></a></li>
</ul>
<ul class="mode-connected">

@ -109,6 +109,9 @@ $(document).ready(function () {
case 'firmware_flasher':
TABS.firmware_flasher.initialize(content_ready);
break;
case 'help':
TABS.help.initialize(content_ready);
break;
case 'auxiliary':
TABS.auxiliary.initialize(content_ready);

@ -0,0 +1,64 @@
.tab-help .left {
width: 60%;
}
.tab-help .right {
float: left;
margin-left: 10px;
width: calc(40% - 10px);
}
.tab-landing .section {
margin-bottom: 10px;
}
.left .section:last-child,
.right .section:last-child {
margin-bottom: 0px;
}
.section .title {
line-height: 20px;
text-align: center;
font-weight: bold;
color: white;
border-bottom: 1px solid silver;
background-color: #3f4241;
}
.documentation {
height: 447px;
border: 1px solid silver;
}
.documentation p {
padding: 5px;
}
.documentation p a {
font-weight: bold;
}
.documentation p a:hover {
text-decoration: underline;
}
.support {
height: 447px;
border: 1px solid silver;
}
.support p {
padding: 5px;
}
.support p a {
font-weight: bold;
}
.support p a:hover {
text-decoration: underline;
}
.support .wrapper {
height: 426px;
overflow-y: scroll;
overflow-x: hidden;
}

@ -0,0 +1,17 @@
<div class="tab-help">
<div class="left">
<div class="section documentation">
<div class="title" i18n="defaultDocumentationHead"></div>
<p i18n="defaultDocumentation"></p>
</div>
</div>
<div class="right">
<div class="section support">
<div class="title" i18n="defaultSupportHead"></div>
<div class="wrapper">
<p i18n="defaultSupport"></p>
</div>
</div>
</div>
</div>

@ -0,0 +1,21 @@
'use strict';
TABS.help = {};
TABS.help.initialize = function (callback) {
var self = this;
if (GUI.active_tab != 'help') {
GUI.active_tab = 'help';
googleAnalytics.sendAppView('help');
}
$('#content').load("./tabs/help.html", function () {
localize();
if (callback) callback();
});
};
TABS.help.cleanup = function (callback) {
if (callback) callback();
};

@ -7,10 +7,18 @@
margin-left: 10px;
width: calc(40% - 10px);
}
.tab-landing .optional_permissions {
display: none;
.tab-landing .section {
margin-bottom: 10px;
}
.left .section:last-child,
.right .section:last-child {
margin-bottom: 0px;
}
.tab-landing .optional_permissions {
display: none;
border: 1px solid silver;
}
@ -46,19 +54,32 @@
.tab-landing .optional_permissions a:hover {
background-color: #dedcdc;
}
.welcome {
height: 207px;
}
.contributing,
.welcome {
height: 171px;
padding: 5px;
margin-bottom: 10px;
border: 1px solid silver;
}
.contributing a,
.welcome a {
font-weight: bold;
}
.contributing a:hover,
.welcome a:hover {
text-decoration: underline;
}
.contributing li {
list-style-type: disc;
list-style-position: initial;
margin-left: 20px;
}
.changelog {
border: 1px solid silver;
}
@ -88,13 +109,13 @@
.changelog .wrapper p {
margin-bottom: 5px;
}
.donate {
height: 105px;
margin-bottom: 10px;
border: 1px solid silver;
}
.donate .title {
.section .title {
line-height: 20px;
text-align: center;
@ -117,19 +138,9 @@
}
.tab-landing .sponsors {
height: 105px;
height: 254px;
border: 1px solid silver;
}
.tab-landing .sponsors .title {
line-height: 20px;
text-align: center;
font-weight: bold;
color: white;
border-bottom: 1px solid silver;
background-color: #3f4241;
}
.tab-landing .sponsors p {
padding: 5px;
}
@ -139,57 +150,3 @@
.tab-landing .sponsors p a:hover {
text-decoration: underline;
}
.documentation {
height: 135px;
border: 1px solid silver;
}
.documentation .title {
line-height: 20px;
text-align: center;
font-weight: bold;
color: white;
border-bottom: 1px solid silver;
background-color: #3f4241;
}
.documentation p {
padding: 5px;
}
.documentation p a {
font-weight: bold;
}
.documentation p a:hover {
text-decoration: underline;
}
.support {
height: 135px;
border: 1px solid silver;
}
.support .title {
line-height: 20px;
text-align: center;
font-weight: bold;
color: white;
border-bottom: 1px solid silver;
background-color: #3f4241;
}
.support p {
padding: 5px;
}
.support p a {
font-weight: bold;
}
.support p a:hover {
text-decoration: underline;
}
.support .wrapper {
height: 114px;
overflow-y: scroll;
overflow-x: hidden;
}

@ -1,24 +1,18 @@
<div class="tab-landing">
<div class="left">
<div class="optional_permissions">
<div class="section optional_permissions">
<div class="title" i18n="default_optional_permissions_head"></div>
<p i18n="default_optional_permissions_text"></p>
<a id="requestOptionalPermissions" href="#" i18n="default_request_optional_permissions"></a>
<div class="clear-both"></div>
</div>
<div class="welcome" i18n="defaultWelcomeText"></div>
</div>
<div class="right">
<div class="changelog configurator">
<div class="title" i18n="defaultChangelogHead"></div>
<div class="wrapper">
<!-- changelog content will be loaded here -->
</div>
<div class="section welcome" i18n="defaultWelcomeText"></div>
<div class="section contributing">
<div class="title" i18n="defaultContributingHead"></div>
<p i18n="defaultContributingText">
</p>
</div>
</div>
<div class="clear-both"></div>
<div class="left">
<div class="donate">
<div class="section donate">
<div class="title" i18n="defaultDonateHead"></div>
<p i18n="defaultDonateText">
</p>
@ -28,7 +22,13 @@
</div>
</div>
<div class="right">
<div class="sponsors">
<div class="section changelog configurator">
<div class="title" i18n="defaultChangelogHead"></div>
<div class="wrapper">
<!-- changelog content will be loaded here -->
</div>
</div>
<div class="section sponsors">
<div class="title" i18n="defaultSponsorsHead"></div>
<p>
&bull; <a href="http://www.massiverc.com" title="www.massiverc.com" target="_blank">MassiveRC</a><br />
@ -39,19 +39,4 @@
</div>
</div>
<div class="clear-both"></div>
<div class="left">
<div class="documentation">
<div class="title" i18n="defaultDocumentationHead"></div>
<p i18n="defaultDocumentation"></p>
</div>
</div>
<div class="right">
<div class="support">
<div class="title" i18n="defaultSupportHead"></div>
<div class="wrapper">
<p i18n="defaultSupport"></p>
</div>
</div>
</div>
</div>
Loading…
Cancel
Save