Thought I'd share my changes :)

General discussion of OpenCATS

Moderators: RussH, cptr13

Forum rules
Just remember to play nicely once you walk through the door. You can disagree with us, or any other commenters in this forum, but keep comments directed to the topic at hand.
paul2higgins
Posts: 16
Joined: 15 Aug 2017, 21:09
what is two(2) plus three(3) ?: 5

Thought I'd share my changes :)

Post by paul2higgins » 05 Sep 2017, 10:33

Been working on this for a while and made oms changes and thought I'd share.

So, I wanted to choose which main tabs a user sees, so no I can add and edit a user and allow which tabs they get to use.

I also wanted to limit scrolling and see data in a quicker view, so I split the views into sub tabs....see screenshot.
This got me thinking, what if I wanted extra fields and more sub tabs? So, in admin, I can now add as many sub tabs and fields within them :)

I also wanted a tagging system where you click on the view and start typing, and match this tagging system to jobs- so you can tag a candidate and tag a company - and search and see both who have the same tags :)

More works in the pipeline, will keep you updated and get any feedback.
Attachments
TabManagement.png
TabManagement.png (121.74 KiB) Viewed 1014 times
CompanyView.png
CompanyView.png (97.74 KiB) Viewed 1014 times
CandidateView.png
CandidateView.png (102.78 KiB) Viewed 1014 times

User avatar
RussH
Site Admin
Posts: 754
Joined: 12 Apr 2008, 08:28
what is two(2) plus three(3) ?: 5
Location: UK
Contact:

Re: Thought I'd share my changes :)

Post by RussH » 05 Sep 2017, 13:06

Looking good, Paul - we're always open to discussions on a more effective workflow etc.
RussH

Report your issues and feature requests;
https://github.com/opencats/opencats/issues

Please CLICK THE TICK to accept the answer!

User avatar
cptr13
Posts: 410
Joined: 23 Apr 2008, 01:53
what is two(2) plus three(3) ?: 5
Location: Mobile, AL
Contact:

Re: Thought I'd share my changes :)

Post by cptr13 » 12 Sep 2017, 10:07

I want to know how did you get it to LOOK like that... The tabs...they're so shiny and square

User avatar
cptr13
Posts: 410
Joined: 23 Apr 2008, 01:53
what is two(2) plus three(3) ?: 5
Location: Mobile, AL
Contact:

Re: Thought I'd share my changes :)

Post by cptr13 » 23 Sep 2017, 16:56

Paul.....mind sharing this code? I'd love to see it

karthikjoe
Posts: 40
Joined: 19 Jul 2017, 05:31
what is two(2) plus three(3) ?: 5
Location: Madurai,Tamilnadu,India

Re: Thought I'd share my changes :)

Post by karthikjoe » 26 Sep 2017, 05:56

Hi.....Paul I think your OPENCATS looking like a new. If you Share your all source code it will be most helpful for most of them.

dveos
Posts: 65
Joined: 09 Jun 2015, 15:35
what is two(2) plus three(3) ?: 5

Re: Thought I'd share my changes :)

Post by dveos » 30 Apr 2018, 16:56

I have achieved similar to this if anyone is interested.

Please see screenshots below:-

Image

Image

Image

If anyone is interested the files are attached! I haven't yet added this to contacts etc. but is in the pipeline.

Note: I have added in some extra functionality to the original install (i.e. emails)

Add this to main.css:-

Code: Select all

/* Style the tab */
.tabout {
    overflow: hidden;
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}	

.tab {
    overflow: hidden;
    background-color: #acacac;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ddd;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.3s;
    font-size: 14px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #f7f7f7;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
Upload Show.tpl to modules/candidates/
Show.zip
(6.24 KiB) Downloaded 26 times
Last edited by dveos on 30 Apr 2018, 23:07, edited 2 times in total.

dveos
Posts: 65
Joined: 09 Jun 2015, 15:35
what is two(2) plus three(3) ?: 5

Re: Thought I'd share my changes :)

Post by dveos » 30 Apr 2018, 18:00

Update: Here is contacts :
Show.zip
(3.99 KiB) Downloaded 22 times

dveos
Posts: 65
Joined: 09 Jun 2015, 15:35
what is two(2) plus three(3) ?: 5

Re: Thought I'd share my changes :)

Post by dveos » 30 Apr 2018, 18:26

Companies :
Show.zip
(3.77 KiB) Downloaded 24 times

caines1989
Posts: 28
Joined: 15 May 2017, 21:33
what is two(2) plus three(3) ?: 5

Re: Thought I'd share my changes :)

Post by caines1989 » 13 Jun 2018, 22:15

paul2higgins wrote:
05 Sep 2017, 10:33
Been working on this for a while and made oms changes and thought I'd share.

So, I wanted to choose which main tabs a user sees, so no I can add and edit a user and allow which tabs they get to use.

I also wanted to limit scrolling and see data in a quicker view, so I split the views into sub tabs....see screenshot.
This got me thinking, what if I wanted extra fields and more sub tabs? So, in admin, I can now add as many sub tabs and fields within them :)

I also wanted a tagging system where you click on the view and start typing, and match this tagging system to jobs- so you can tag a candidate and tag a company - and search and see both who have the same tags :)

More works in the pipeline, will keep you updated and get any feedback.
hey Paul it looks super nice, do you have the files, so i can replicate this look also and give it a try please?

caines1989
Posts: 28
Joined: 15 May 2017, 21:33
what is two(2) plus three(3) ?: 5

Re: Thought I'd share my changes :)

Post by caines1989 » 17 Jun 2018, 15:32

dveos wrote:
30 Apr 2018, 16:56
I have achieved similar to this if anyone is interested.

Please see screenshots below:-

Image

Image

Image

If anyone is interested the files are attached! I haven't yet added this to contacts etc. but is in the pipeline.

Note: I have added in some extra functionality to the original install (i.e. emails)

Add this to main.css:-

Code: Select all

/* Style the tab */
.tabout {
    overflow: hidden;
    background-color: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}	

.tab {
    overflow: hidden;
    background-color: #acacac;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: #ddd;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.3s;
    font-size: 14px;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #f7f7f7;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #fff;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
Upload Show.tpl to modules/candidates/ Show.zip
Hey dveos I gave this a try but i didn't get the blue border around the buttons , do you maybe know why or what I could do to change this?

I added your 3 show files in each module section, candidates, clients and company

Post Reply