Skip to content

Instantly share code, notes, and snippets.

@jsmithdev

jsmithdev/pageBlockConverted.page

Created September 21, 2017 15:41
Show Gist options
  • Save jsmithdev/32f3482ebac5d55cfa1b36be643dcc87 to your computer and use it in GitHub Desktop.
Save jsmithdev/32f3482ebac5d55cfa1b36be643dcc87 to your computer and use it in GitHub Desktop.
Download ZIP
VF page that has been converted to a more standard web format conducive to lightning. Get wrapped SLDS here: https://tools.lightningdesignsystem.com/css-customizer
Raw
pageBlockConverted.page
<apex:page standardController="Program__c" extensions="commProgramExt" showHeader="true" standardStylesheets="false">
<head>
<apex:stylesheet value="{!URLFOR($Resource.sldsScoped, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<style>
html {
width: 98%;
background: white !important;
height: 100%;
overflow: hidden;
}
body, section {
width: 100%;
height: 100%;
background:#FFF !important;
background-color:#FFF !important;
}
table {
margin-top: 1rem;
}
th {
text-transform: uppercase;
font-size: .875rem;
position: relative;
color: #696969;
max-width: 200px;
border-bottom: 1px solid #d4d4d4;
padding: .5rem .5rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: normal;
text-align: left;
background-color: rgb(253, 253, 253);
}
thead {
border-bottom: .1rem solid #D4D4D4;
}
.txtCenter {
text-align: center !important;
}
.scrollable {
overflow-y: scroll;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F9F9F9;
}
::-webkit-scrollbar {
width: 12px;
background-color: #F9F9F9;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.slds-button_brand {
background: #0070d2 !important;
color: white !important;
padding: 0 1rem !important;
}
.center {
text-align:center;
}
.active {
display:block;
}
.inactive {
display:none;
}
/* THIS WILL CORRECT THE DISTORTION WHEN PAGE IS EMBEDDED IN COMMUNITY */
/*fix for community*/
.brandQuaternaryBgr, .sfdcBody {
background:#FFF !important;
background-color:#FFF !important;
}
html .brandQuaternaryBgr {
background:#FFF !important;
background-color:#FFF !important;
}
</style>
</head>
<body id="pageBody" class="scrollable slds" onload="isCommunity()" >
<apex:form >
<div class="slds center">
<!--<apex:commandButton value="New Session" action="{ goMkSession}" rerender="table" styleClass="slds-button slds-button_brand" />-->
<button id="mkSession" class="slds-button slds-button_brand" type="button">New Session</button>
</div>
<section id="sessionList" class="slds scroll active">
<table id="table" class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Name">Session Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Contact Record Type">Session Date</div>
</th>
<th scope="col">
<div class="slds-truncate txtCenter" title="Confirmed">Total Mentee Sessions</div>
</th>
<th scope="col">
<div class="slds-truncate txtCenter" title="Enrollment Date">Total Mentor Sessions</div>
</th>
</tr>
</thead>
<tbody >
<apex:repeat var="sesh" value="{!sessions}">
<tr>
<td>
<apex:outputlink target="_blank" value="/{!sesh.Id}">{!sesh.Name}</apex:outputlink>
</td>
<td>
<apex:outputfield value="{!sesh.Session_Date__c}" />
</td>
<td class="txtCenter">
<apex:outputfield value="{!sesh.Total_Mentee_Sessions__c}" />
</td>
<td class="txtCenter">
<apex:outputfield value="{!sesh.Total_Mentor_Sessions__c}" />
</td>
</tr>
</apex:repeat>
</tbody>
</table>
</section>
<section id="sessionNew" class="slds scroll inactive" style="margin-top: 1rem;">
<div class="center" style="background:#FFF !important">
Program
<apex:inputField value="{!session.Program__c}" />
<br /><br />
Date<br />
<apex:inputField value="{!session.Session_Date__c}" />
<br /><br />
<apex:commandButton value="Save" action="{!save}" styleClass="slds-button slds-button_brand" />
</div>
</section>
</apex:form>
</body>
<script>
'use strict'
const getId = (x) => document.getElementById(x)
/*
const isCommunity = () => {
if (String(location.href).toLowerCase().includes('iframe')) {
//after testing, assumes we're in a community
console.log('Community')
Array.from(document.getElementsByTagName('body')).map((x) => x.classList.remove('brandQuaternaryBgr'))
Array.from(document.getElementsByTagName('body')).map( x => x.style.background = '#FFF !important' )
}
}
*/
const mkSession = (e) => toggle(['sessionList', 'sessionNew'], e.target)
const toggle = (arr, elem) => {
arr.map(x => {
x = getId(x)
if(x.classList.contains('active')){
x.classList.remove('active')
x.classList.add('inactive')
}
else {
x.classList.remove('inactive')
x.classList.add('active')
}
})
if(elem.innerText == 'New Session'){
elem.innerText = 'Cancel'
elem.classList.remove('slds-button_brand')
elem.classList.add('slds-button_neutral')
}
else {
elem.innerText = 'New Session'
elem.classList.remove('slds-button_neutral')
elem.classList.add('slds-button_brand')
}
}
// run logic
//isCommunity()
getId('mkSession').onclick = (e) => mkSession(e)
</script>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment