New Start Page Layout

by Ramesh Kanagaraj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.silver.min.css">
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<body>
  <div class="toolbar">
      <div class="workgroup">Product Development Tracker</div>
      <div class="operations">
          <!--
          <span class="op-button" id="user_options">Options</span>
          <span class="op-button">Help</span>
          <span class="op-button">Logout</span>
          -->
      </div>
  </div>
  <div class="main-content-wrapper">
   <div class="main-content">
    <div class="company">Acme Corporation</div>
    <div class="user">Susan Smith</div>   
    <div class="division">Software Development</div>
    <div class="time-zone">Pacific Daylight Time</div>
    <div class="messages">
        <div class="box-message box-message-info">
            <div class="content">System will be down for maintenance at 10PM Pacific Time tonight.</div>
            <div class="close" title="Click to close this message. It will not be displayed again unless the system message has changed.">x</div>
        </div>
        <div class="box-message box-message-warn">
            <div class="content">Your trial expires in 12 days.</div>
        </div>
    </div>
    <div class="directions">
        To get started, open an existing workspace or create a new one.
    </div>
    <div class="workspaces">
        <div class="workspace-list-header">Workspaces</div>
        <ul class="workspace-list">
            <li class="workspace"><span class="name">Development</span><span class="description">software development for our widget product</span></li>
            <li...

CSS

body {
    height: 100%;
    width: 100%;
    font-family: Lucida Grande, Segoe UI Semibold, Arial, sans-serif;
    background-color: hsl(0, 0%, 96%);
    min-width: 700px;
    margin: 0;
}
.toolbar {
    background-color: #333;
    color: white;
    height: 2.5em;
    width: 100%;
}
.workgroup {
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    margin-top: 0.2em;
    float: left;
    width: 60%;
}
.operations {
    float: right;
    margin-top: 0.4em;
    margin-right: 0.2em;
    font-size: 1em;
}
.k-menu               .k-item > .k-link,
.k-menu .k-menu-group .k-item > .k-link {
    padding: 2px 0.8em 2px 0.8em;
}
/*
.k-menu.k-header {
    border-color: #333;
}
.k-menu .k-item {
    border-color: #333;
}
.k-menu .k-item > .k-link {
    background-color: #333;
    color: white;
}
.k-menu .k-menu-group .k-item > .k-link {
    background-color: #EEE;
    color: #333;
}
*/
/*
.k-menu               .k-item > .k-link:hover,
.k-menu .k-menu-group .k-item > .k-link:hover {
    background-color: #EEE;
    color: #333;
}
*/
.op-button {
    background-color: transparent;
    border-radius: 4px;
    padding: 0.2em;
    margin-right: 0.2em;
}
.op-button:hover {
    background-color: hsl(208, 60%, 39%);
    cursor: pointer;
}
.main-content-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main-content {
    padding: 0 0.5em 0 0.5em;
    overflow: hidden;
}
.company {
    font-size: 1.4em;
    font-weight: bold;
    float: left;
    width: 40%;
    margin-top: 0.3em;
}
.division {
    font-size: 1.1em;
    font-weight: normal;
    float: left;
    width: 40%;
}
.user {
    font-size: 1.4em;
    font-weight: bold;
    float: right;
    text-align: right;
    width: 40%;
    margin-top: 0.3em;
}
.time-zone {
    font-size: 1.1em;
    font-weight: normal;
    float: right;
    text-align: right;
    width: 40%;
}

.messages {
    padding-top: 0.5em;
    width: 100%;
    height: 100%;
    clear: both;
   ...

JavaScript

$(".box-message .close").kendoTooltip({
    position: "left",
    callout: true,
    width: 300
});
$(".workspace-list").kendoTooltip({
    filter: ".name",
    content: function (e) {
        return "Pretend that clicking here brings you to the <strong>" + e.target.text() + "</strong> workspace (see <a href='http://jsfiddle.net/ejlnr/xsznga7d/light/' target='workspaceFiddle'>this fiddle</a> for an example of the new workspace page layout)."; },
    position: "right",
    callout: true,
    width: 300
});
$("#admin_link").kendoTooltip({
    position: "right",
    width: 500,
    callout: true,
    content: "Clicking here will go to the admin page (similar to how it works now). However, I am considering removing this option and just having a separate login for the workgroup admin operations. That would... <ol><li>Make it easier to use different IIS security for admin pages.</li><li>Avoids the difficulties in having an admin interface and end user interfaces in the same web page (requiring admin changes to be immediately reflected in the end user interface).</li><li>Keep ASP code entirely out of the end user login page.</li></ol>"
});
$(".box-message .close").click(function (e) {
    tooltip.hide();
    $(this).parent().fadeOut(500);
});
$(".operations").kendoMenu({
    dataSource: [
        { text: "Account",
          items: [
              { text: "Information" },
              { text: "Preferences" }
          ]
        },
        { text: "Help" },
        { text: "Logout" }
    ]     
});