Skip to content

Updated Dashboard.html #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NtemKenyor merged 2 commits into from
Oct 11, 2022
Merged

Updated Dashboard.html #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff4c087
Update dashboard.html
johnwinifred Oct 7, 2022
4a71643
I have added a comment that will remain throughout the project when a…
johnwinifred Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion assets/vendor/js/dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,20 @@ function add_element_2_dashboard (tag_name) {
//ref.innerHTML = document.createElement(tag_name).toString();
//var content = '<' + tag_name + ' id="'+elemId+'" ondblclick="change_selected(event, "'+tag_name+'", "'+elemId+'" ) style= "height: '+ height + '; width: '+ width + '; background-color: ' + background + ' ;"' + '></' + tag_name + '>';
/*'<' + tag_name + ' ondblclick="change_selected(event,'+ '"'+tag_name+'"' , '"'+elemId+'"' +') id="'+elemId+'" style= "height: '+ height + '; width: '+ width + '; background-color: ' + background + ' ;"' + '></' + tag_name + '>';*/
ref.innerHTML = "";

// This is the innerHTML of the development dashboard
ref.innerHTML = "";
var your_comment = `
<head>
<title> #Particular Project Name</title>
<script>
//Plugin Start
//##
//Plugin End
</script>
</head>
`;
ref.innerHTML= your_comment;
proper_fitting = "\n" + "\t";
//alert( document.getElementById('the_dev_dashboard').compareDocumentPosition(ref) );
ref.append(proper_fitting);
Expand Down
75 changes: 67 additions & 8 deletions pages/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,66 @@ <h3 class="sider_header" id="The_right_header_side"> Attributes </h3>
</aside>

<div ondragover="elem_allowDrop(event)" ondrop="elem_drop(event)" class="the_dev_body" id="the_dev_dashboard" ondblclick="change_selected(event, 'div', 'the_dev_dashboard')">
<!-- This is for the Dashboard project;
Tools:
*Bootstrap: to improve the overall responsiveness of the project on all devices
*Favicon: To aesthetically improve the project
*Google Fonts
Background:
* Define color for text, background, buttons, hover color and active color(Use three dominant colors)
* Improve UI(3D_buttons, color_gradients, box_shadow)
Features
For the general features use appropriate UI design patterns(easy to identify icons, good font) to help guide users.

Features like links and buttons should perform in a way that users can unconsciously see them everywhere.
.*Change color when features are on hover or active
* Add Favicons for aesthetics
* improve border design around buttons

Div “the_top_bar”
Position the link_text with icons at the right end of the nav width.

*for the span element, add space around link_texts and icons
Still on the span element: For mobile and small devices
Add a "grid-alt" icon from box icon to replace the span elements// on hover, the span elememts will be displayed as dropdown.

Sidebar on the_content_arena:
* Sidebar should be hidden and displayed only when the restore- icon is clicked.
* Use caret right and left icon to replace the leftBarRestore and rightBarRestore (The caret icon is predictable by users) to collapse either sidebars.
the_selected_displayer on the sidebar
Improve the UI

Div “full_left_aside_section”
For improved user-experience
*add dropdown options in the form box so users can select options provided instead of typing
eg(display —inline, flex, grid options).
*Adding a color picker for the color attributes in case the user is unsure of the Hex or rgba code
Text with class ” each_item”
*For long text behind the box; set text_overflow to ellipses and on hover full text is displayed to user.

The_bottom_bar
*Remove the margin above the_bottom_bar
*alignitems to center
*space around the items

pop_up_frames
*if two pop_up_frames are simultaneously opened, clicking on one should display it over the other.

Div class"create_project_pop"
Div class"the_settings_section_page"
Restyle the Div container
Div class"the_adder_heading"
*the close button on the pop_up_frames do not close the pop-up
*remove the scrollbar on hover and use color change instead
Make modules
*Place bullets near the texts



-->

<b>This is the main dashboard arena. Drag html tag here and add more attributes and styles to them</b>

</div>

</div>
Expand All @@ -381,27 +440,27 @@ <h3 class="sider_header" id="The_right_header_side"> Attributes </h3>
<div class="the_bottom_bar" >
<span ondragstart="elem_drag(event, 'div')" draggable="true" class="the_bottom_elems_block" onclick="add_element_2_dashboard('div')">div</span>

<span ondragstart="elem_drag(event, 'span')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('span')">span</span>
<span ondragstart="elem_drag(event, 'span')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('span')">span</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'p')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('p')">p</span>
<span ondragstart="elem_drag(event, 'p')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('p')">p</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'h1')" draggable="true" class="the_bottom_elems_block" onclick="add_element_2_dashboard('h1')">h1</span>

<span ondragstart="elem_drag(event, 'h2')" draggable="true" class="the_bottom_elems_block" onclick="add_element_2_dashboard('h2')">h2</span>

<span ondragstart="elem_drag(event, 'h3')" draggable="true" class="the_bottom_elems_block" onclick="add_element_2_dashboard('h3')">h3</span>

<span ondragstart="elem_drag(event, 'input')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('input')">input</span>
<span ondragstart="elem_drag(event, 'input')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('input')">input</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'ul')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('ul')">div</span>
<span ondragstart="elem_drag(event, 'ul')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('ul')">div</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'li')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('li')">li</span>
<span ondragstart="elem_drag(event, 'li')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('li')">li</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'button')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('button')">button</span>
<span ondragstart="elem_drag(event, 'button')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('button')">button</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'img')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('img')">img</span>
<span ondragstart="elem_drag(event, 'img')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('img')">img</span> <!--unchanged-->

<span ondragstart="elem_drag(event, 'center')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('center')">center</span>
<span ondragstart="elem_drag(event, 'center')" draggable="true" class="the_bottom_elems" onclick="add_element_2_dashboard('center')">center</span> <!--unchanged-->

<em style="color: #ffffff;" onclick="loadElements()">more >> </em>

Expand Down