Giter VIP home page Giter VIP logo

forumactif-edge's Introduction

Forumactif Edge

What is "Forumactif Edge" ? Forumactif Edge ( or FA Edge, FAE ) is a new modern and responsive forum theme for Forumotion forums, that is like an entirely new forum version in itself. It comes ready with numerous plugins and best of all it's responsive, so you can browse on your mobile device without any problems !

What does Forumactif Edge offer ?

  • Modern mobile-friendly design.
  • Smart automated control panel that assists you with installation and other tasks.
  • Dynamic theme selector so your members can browse in the color they prefer.
  • Side panels for widgets and quick navigation so your forum has maximum space and accessibility.
  • Automatic color coding of posts based on usergroup affiliation.
  • Built in counter for reputation votes.
  • and more...

Forumactif Edge will constantly evolve because it's open source and managed by the community. That means we'll take feedback, suggestions, and reports from the community -- that's right, your voice can shape the future of this project ! If you'd like to install Forumactif Edge on your Forumotion forum, please see the wiki link below which includes detailed instructions on how to install the theme along with additional information on Forumactif Edge that's constantly changing.

Not ready to install yet ? No problem ! Take a look around, check out the FAQ and previews below, or visit our website to learn more about what Forumactif Edge has to offer !

FAQ

Do you have any questions or concerns about Forumactif Edge ? If so, feel free to check out our FAQ page or contact us by opening a new issue ! (requires github account) We're always ready to answer your questions ! 😉

Preview

You can find various previews of the theme below. Click here if you'd like a live preview of Forumactif Edge.

Mobile Preview : Forumactif Edge is responsive, so that means it's mobile friendly ! Don't believe it ? Check out Google's Mobile-Friendly test !

Feature Preview : Forumactif Edge comes with a theme changer that allows your members to browse in the color of their choice, and to give your forum maximum space it docks widgets to a side panel !

Full Page Screenshots

Click any of the links below to see a full page screen shot of Forumactif Edge in action.

Desktop Mobile
Homepage Homepage (Mobile)
Topics Topics (Mobile)
Forumactif Edge Control Panel N/A

forumactif-edge's People

Contributors

bigtuber avatar sethclydesdale avatar translationscloud avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

forumactif-edge's Issues

Theme Selector : <select> options are not styleable on Firefox v49.0.1+

Topic on forum : http://fmdesign.forumotion.com/t1055-12-pick-a-theme#22340

Description : A handful of people have reported inconsistencies in the style of the option elements for the theme selector. Normally the theme options display the color of the theme in the background of the option, but after update 49.0.1 on Firefox, some people have reported the options being all white.

Todo : Since this has been an issue for awhile, I've decided that it's time to change the theme selector to something that is NOT a element. Preferably a DIV that contains anchors as the options. It'll no doubt require an overhaul of the script though -- replacement via update might be tricky too. I'll update this with concepts when I get to work on 'em. Concerned File(s) : all.js:L70

Dark Mode

Description : Currently Forumactif Edge offers two theme versions ; Light and Dark. The idea is to add a button on the footer that will allow the user to switch between both of these themes. I know some people prefer darker themes over light ones, especially those with light-sensitivity issues, so this would be a godsend for them.

Notes :

  • We can use the themes found here, and possibly import them from github and store them via the storage API, if possible.
  • Modifications will need to be made to the FAE CP to determine two things ; 1. The type of theme installed and 2. the text direction of the theme. Then we'll apply these settings to the dark mode script. Installing new variables might be a good idea.

Who is online icon is not floated

Topic on the forum : http://fmdesign.forumotion.com/t1277-imagine-in-statistics#29567

Description : When adding a who is online icon via pics management, the icon is not floated to the left like it should be. It appears this portion was missed during initial development of Forumactif Edge. The CSS snippet below needs to be added to the stylesheets in the next patch.

#i_whosonline {
  float:left;
  margin-right:6px;
}
 
#i_whosonline[src$="empty.gif"] { display:none; }
#wio_activity .txt-content > br:last-child { clear:both; }

Extra note : The icon may need to be floated to the right for RTL stylesheets. Keep that in mind.

Control Panel Maintenance Message

Changes made to the Control Panel on Github are instantly visible to the user. As such I think adding a Maintenance Message while changes are being made would be a good idea, because sometimes errors may occur while adding in new features or making modifications.

A few things need to be done :

  1. Add a variable to the install-utils.js ( this is the control panel script ) which can be toggled ; toggling the variable will show the maintenance message, so our users know maintenance is being performed.
  2. Create a wiki page explaining the maintenance message.

Add "Copy Code" button to code boxes

Topic on the forum : http://fmdesign.forumotion.com/t1163-select-button#27900

Description : Adding a "copy code" button to the code boxes will make it easier to select and copy the contents, especially for forums based around programming, plugins, etc...

Notes :

  • I've create a plugin awhile back which automatically copies the code using clipboard.js. We can implement this plugin into FAE.
  • Some forums may already have a "Select Content" button installed, so we should try to avoid conflicts with this plugin.

Chatbox theme settings do not persist when switching to archives

This issue concerns the plugin created for #22. When switching to the archives the chatbox frame is reloaded, therefore removing the selected theme. We should be able to remedy this issue by attaching an onload event to the concerned frames. Then each time they're reloaded they reapply the selected themes.

Control panel tells the founder to login into their Admin Panel even though they're logged in

Currently the control panel is requesting the founder to log into their Admin Panel even though they're already logged into it. I believe the CP is having trouble detecting a certain element in the Admin Panel which verifies if the founder is logged in or not. This problem is most likely caused by Forumotion changing the design of their admin panel, I'll look into fixing this as soon as possible.

Allow newsletters "Popular contents" is missing from profile preferences

This option allows the administrator to send the forum's most popular contents every 15 days. Unfortunately it's missing from the profile preferences page, disallowing members from un/subscribing from this newsletter.

To add it in we just need to add this snippet to the profile_add_body

<!-- BEGIN display_newsletter_auto -->
<dl>
    <dt><label>{L_NEWSLETTER_AUTO_ACCEPT} :</label></dt>
    <dd>
        <label><input type="radio" name="newsletter_auto" value="1" {NEWSLETTER_AUTO_YES} />{L_YES}</label>
        <label><input type="radio" name="newsletter_auto" value="0" {NEWSLETTER_AUTO_NO} />{L_NO}</label>
        <br /><span class="italic">{L_NEWSLETTER_AUTO_ACCEPT_EXPLAIN}</span>
    </dd>
</dl>
<!-- END display_newsletter_auto -->

It should go right after the portion for {L_NEWSLETTER_ACCEPT}.

NOTE: When adding this via the 1.2.10 update file, do make sure to check for the existence of this in the founder's template before injecting it. We want to refrain from duplicating modifications that the founder has already made.

Can't update to 1.2.8

I saw there was a new update but when I clicked the check for updates button in the control panel it just displays "Checking for updates on Github..." but doesn't do anything
2018-06-06_11-16-17

Add Theme Selector manager to the Control Panel

The theme selector has hundreds of colors available, but not everything may appeal to the administrators or members. As such, I've been thinking about adding a Theme Selector Manager to the control panel that allows you to edit, remove, and add new theme options to the selection.

We should probably work on this after #21 though, because we can use the color selector for creating new options.

1.0.0 Beta Test

If you don't yet know what "ForumActif Edge" is please see the wiki.

Now that the installer has been completed we can begin beta testing Forumactif Edge. To test v1.0.0-beta please read the instructions here and test any of the points below, once the installation has completed. Since the installer will overwrite your current theme I would recommend performing the installation on a test forum.

General

  • Make sure that the installation instructions are easy to follow. Any feedback is appeciated ; I just want to make sure it's easy for people to install.
  • Perform the installation and ensure Forumactif Edge is installed without issue
  • Explore your forum with the theme installed and report any bugs or concerns

Control Panel

  • Test the reinstall button after making changes to the forum ( e.g. disabling templates, css, etc.. )
  • Test the uninstall button
  • Test the check for updates button ( current version is 1.0.0-beta so no updates atm )

If you encounter any issues or concerns while testing let me know.

Thanks a lot for your help !

Classified Ads : Design Issues

Topic on forum : http://fmdesign.forumotion.com/t1085-bug-some-bugs-about-the-classified-ads-on-fae#24465

Description : There's a few inconsistencies with the design of the classified ads section on forumotion. Mostly some minor tweaks will need to be made to the CSS and theme switching JavaScript.

Todo :

  1. ✔️ The "Posts" text has no purpose on the classified ads forums. Find some way to remove this text. (image)
  2. ✔️ Theme switcher has no effect on the classified ads section. Add the new selectors to the theme switcher. (click to view JS)
  3. ✔️ The texts for the ad container titles are not vertically aligned. Make some some adjustments to align the texts. (image) (click to view CSS)

Custom theme picker moves the forum when shown

When the "Custom theme" option in the theme selector is chosen, a color picker appears to the right of it. Currently when this color picker shows up, the forum contents shift downwards a little. We don't want the color picker messing with the forum structure like this, so it'll need to be fixed so that it doesn't take up space in the DOM.

Website

Description : To celebrate the 1.2.0 milestone and the continued support of our community, it's time that we've create a Github page for Forumactif Edge to showcase its finest points.

TODO :

  1. Setup files ✔️
  2. Write about the awesome features ✔️
  3. Work on overall design ✔️
  4. Create demos for bubbles ✔️
  5. Ask for feedback ✔️

Panneau de configuration Edge de Forumactif

Bonjour, voici le problème

En français : Panneau de configuration Edge de Forumactif
Ce panneau vous permet d'installer, de désinstaller et de mettre à jour Forumactif Edge . Préparez-vous à vivre votre forum de manière plus moderne et réactive !

Enregistrer
Bienvenue dans le panneau de configuration FAE ! Le FAE CP vous permettra d'installer, de mettre à jour, de traduire et de personnaliser Forumactif Edge. Pour en savoir plus sur l'utilisation du FAE CP, il est recommandé de lire le Guide du panneau de configuration sur le wiki Github.
ReferenceError : forumactif_edge_version_data n'est pas défini
Une erreur s'est produite lors de la tentative de récupération des données de version de Forumactif Edge. Assurez-vous que la gestion des codes JS est activée. Si c'est le cas, veuillez ouvrir un nouveau sujet et fournir ces informations pour obtenir de l'aide.

En anglais : Forumactif Edge Control Panel
This panel allows you to install, uninstall, and update Forumactif Edge. Get ready to experience your forum in a more modern and responsive way!

Log
Welcome to the FAE Control Panel! The FAE CP will allow you to install, update, translate, and customize Forumactif Edge. To learn more about using the FAE CP, it is recommended that you read over the Control Panel Guide on the Github wiki.
ReferenceError: forumactif_edge_version_data is not defined
An error has occurred while trying to retrieve Forumactif Edge's version data. Please make sure JS Codes Management is enabled. If it is please open a new issue and provide this information for further assistance.

Merci
Screenshot_6

Forumactif Edge v1.3.3

(https://megacine.forumactif.com/)

Chatbox is blank

when I put it at the top or bottom of the homepage its just a blank box is there a way to fix it?
screenshot at 2017-03-02 02-03-41

Schéma data-vocabulary.org obsolete

Bonjour

j'ai un souci avec data-vocabulary la nouvelle norme de google

sur ce liens teste https://search.google.com/test/rich-results?hl=fr  Test des résultat enrichis lien de mon site exemple https://www.welcomepokeronline.com/t334-mot-de-passe-facebook-fans-sur-unibet-le-24-juin-20h30

Googlebot pour smarphone c'est ok

[img]https://i.servimg.com/u/f63/15/76/00/84/google10.png[/img]

Par-contre pour Googlebot pc ça ne fonctionne pas

[img]https://i.servimg.com/u/f63/15/76/00/84/google11.png[/img]

Sa fait deux jours que je galére a trouvé la solution et impossible.

J'aime même ouvert un nouveaux forum pour tester celui ci https://123teste.forumactif.com/

https://123teste.forumactif.com/d10496709-votre-1ere-petite-annonce tester sur  https://search.google.com/test/rich-results?hl=fr  Test des résultat enrichis

Les deux fonctionne, du coup j'ai récuperer  toutes les template et ça fonctionnes pas .

un truc que je trouve birarre sur le forum de teste j'ai

[img]https://i.servimg.com/u/f63/15/76/00/84/00110.png[/img]

et sur mon propre site

[img]https://i.servimg.com/u/f63/15/76/00/84/00210.png[/img]

Forumactif aurrait t'il fait une mise a jour pour les nouveau forum et pas pour les ancien Forum ?


Re
Le souci est dans le template  Affichage  , viewtopic_body

Je pense que c'est ce code qui n'est pas a jour

[code]

                                   {NAV_CAT_DESC}        

 [/code]

https://www.digimood.com/tuto/comment-corriger-le-probleme-data-vocabulary-org-schema-deprecated/

J'ai changer vocabulary.org/Breadcrumb en https://schema.org/BreadcrumbList

Rien a faire, ça ne fonctionne pas .

Pourquoi sur ce forum tout fonctionne correctement https://123teste.forumactif.com/d10496709-votre-1ere-petite-annonce

par contre j'ai pas trouvé

ce code sur ce site

[code]

                                   {NAV_CAT_DESC}        

 [/code] --------------------------------------------------------------------------------------- Pour completer mon poste

Pour mobile

[img]https://i.servimg.com/u/f63/15/76/00/84/mobile10.png[/img]

et pour ordinateur

[img]https://i.servimg.com/u/f63/15/76/00/84/pc10.png[/img]

voilà j'espère que vous pourrais m'aider a modifier la template.

Car a cause de ce probléme google indexe pas toutes les pages de mon forum, j'ai acheté un nom de domaine chez forumactif et supression de publicité

sa m'ennuie de refaire sur un autre forum.


Un membre du staff pourrais t'il regarder mets templates et configurer s'il vous plait ?

Si besoin contacté moi en privé je vous donnerais les identifiant administraturs.

Pour l'heure actuelle je ne peux plus posté sur mon forum car plus rien n'est sur google.


Quand je rentre https://forum.forumactif.com/t405567-probleme-data-vocabulary-forumactif le lien d'ici sur les résultats enrichis

https://search.google.com/test/rich-results?hl=fr  

Tout est parfait, il me semble que vous avez la même version edge que moi, pourquoi vous ça fonctionne et pas pour vois ?

j'ai donné beaucoup d'info, afin de bien me faire comprendre a mon souci que je rencontre.

J'espère que vous pourriez m'aider, Cordialement Patrick

Implement selected theme settings into local iframes

Description : There have been some reports that the selected theme does not apply to the chatbox or emoticon frames. This is of course natural behavior, since javascript by itself cannot influence iframes unless programmed to do so. This can be achieve though, and since a majority of people want it, it'll be implemented into the next patch.

Notes :

  • This will require modifications to the theme selector and dark mode, so we should wait until dark mode is finished before working on this issue.

Install button is not showing

I tried many times but gives the same erro,r i copied installer.html and paste as the guide says but when i click the eyeball icon it is not showing install button and install options only shows log and faecp version and the description at the top

Classified Ads

Forumotion added a new feature to the service -- "Classified Ads" -- which needs to be modified to work with Forumactif Edge. The largest issue is the lack of CSS, followed by a few minor modifications that need to be made to the templates. From what I can tell, forumotion didn't supply us with custom templates for this feature, which is a bit restricting. Still, we'll just have to work with the CSS and modify the existing templates where necessary.

Report & Public Discussion : http://fmdesign.forumotion.com/t1064-bug-classified-ads-feature-from-forumotion#22707

Todo :

  1. Adapt CSS (see)
  2. Adapt Templates (see)

Translation Support

So that this theme can be enjoyed by many people, it'll be necessary to implement a folder that contains different language files. Here's the idea :

  1. We'll have a select box in the control panel that allows the founder to choose the install language. ( we'll make a request to the lang folder to get all available translations )
  2. When the installation begins we'll get the chosen translation and inject it into the document.
  3. We'll then replace variables in our targeted files with the chosen translation.

It'll require an overhaul of the install.js file + all files in the repo, but the benefit to different tongues is great.

French Translation

As we're implementing translation support, I'll be opening topics like these to ask for assistance with translations to different languages. Currently, I'm in the process of testing translations and to start I've created two files :

  1. English.js ( Default Language )
  2. Français.js

My French is limited, so the French translation is currently incomplete. If anyone fluent in French would like to help translate ( and review my current translations ), I'd appreciate it.

These are the aliases that are yet to be translated into French :

  • record_users
  • chatbox_tip
  • chatbox_no_away
  • chatbox_no_online
  • widget_menu_title
  • widget_menu_tooltip
  • select_theme
  • random_theme
  • default_theme
  • quick_nav_title
  • quick_nav_tooltip
  • quick_nav_notif
  • tool_copy_url_tooltip
  • tool_copy_url_prompt
  • tool_admin_panel
  • tool_to_top
  • tool_to_bottom
  • img_resizer_full_size
  • img_resizer_enlarge
  • img_resizer_reduce
  • img_resizer_download
  • img_resizer_tooltip
  • fae_update_found
  • back_to_top
  • fae_feedback
  • fae_feedback_tooltip

You can use CTRL+F to jump to an alias and see its textual content.

Thanks a lot for your help. 😉

"View posts since last visit" is missing

The link "View posts since last visit" among others are missing in the index_body ( and maybe box ). These are useful for finding and managing topics, so it'll need to be added in before the production release.

windows-1252 characters become corrupted over AJAX

Topic on the forum : http://fmdesign.forumotion.com/t1302-upgraded-characters-updated#29858

Description : Accented and special characters appear to become corrupted when transferred over AJAX on older charsets like window-1252. I've dealt with this issue before and already have a fix ready, we just need to implement it into the control panel's AJAX functions. The code in question is :

function Encode (string) {
  return encodeURIComponent(escape(string).replace(/%u[A-F0-9]{4}/g, function(match) {
    return '&#' + parseInt(match.substr(2), 16) + ';'
  })).replace(/%25/g, '%')
};

It has been awhile since I've worked with this, so I'll need to refresh my memory on what needs to be done. Until this has been implemented any further patches are on hold as to avoid corrupting the characters of older forums using FAE.

Responsiveness

Responsiveness is necessary so that the forum can be easily accessible regardless of the device you're using. The ranges that I'm considering are :

  • 0 to 620 pixels
  • 621 to 1024 pixels

These are subject to change though.

Topic share actions lack margin and proper alignment

Description : The share actions above topics appear to be lacking both margin and proper alignment. This seems to be another thing I overlooked during initial development of Forumactif Edge.

I prepped some CSS that'll fix both the margin and alignment in the next patch. Be sure to add it in.

.topic-actions > p.right, .topic-actions > p.right > span {
  margin:0 3px;
}

.topic-actions > .pagination {
  margin:3px;
}

Modern Calendar Widget

Thread : http://fmdesign.forumotion.com/t644-suggestion-custom-calendar-feature#12522

What I suggest for a future tutorial is a customized calendar feature--especially for the widget. Either replacing the default calendar feature with a new one or for tips on how to customize the default one would be super helpful for users. The current, default widget is somewhat...lacking in style and appearance.

Notes :

  • Design similar to Windows 10 or something flat should suffice.
  • The calendar seems to lack a widget template so a custom one might need development.
  • Overhaul to the Calendar templates is likely.

Font Awesome 5.10

Hello,

How to migrate for Font Awesome 4.7 to 5.10 ?

Thanks in advance Seth and sorry for the question !

Add new profile position to general settings

Topic on forum : http://fmdesign.forumotion.com/t1132-suggestion-for-profil-position

Description : It has been suggested that a new profile position should be added to general settings ; "top" like how the profile displays on the mobile version of Forumactif Edge. I do agree that this would be good to add, since this position of the profile is fairly common in some forum versions, such as MyBB.

Image : https://i37.servimg.com/u/f37/18/45/41/65/captur19.png

Implementation : Implementing this new option shouldn't be too hard. We'll need to make some modifications to installer-utils.js around the following lines.

  • line 303 to add a new radio option.
  • line 349 to modify how we identify the settings in the stylesheet. ( the top profile no doubt will require much different CSS )
  • line 376 to add in the new position value and modify the CSS.
  • line 420 to change the replacement string depending on position.

I'll figure everything out once I setup the CSS for the horizontal profile on the desktop version. Most likely we'll need to setup some conditions to change the CSS based on position, shouldn't be too hard to implement.

Overview Change

Hello!

I’m having a problem, which is that I can’t find a way to change this (which is an image) to a custom one that I want to add. Need to use some HTML code? Notice, I don’t know how to use CSS very well!

https://i.imgur.com/wgch7vR.png

I want to remove the current image and replace with another!

Thanks!

Add Quick Navigation options to general settings

The quick navigation has two settings by default, but these settings are only changeable by editing the javascript. To make these settings more accessible, we should add two new options to the General Settings section of the control panel. The settings concerned are as follows :

  1. Quick Navigation Position : left || right
  2. Quick Navigation is Always Visible : true || false

There's also an Additional HTML field that allows you to insert custom HTML into the menu as well, so perhaps we could add this as an advanced third option, maybe.

Installer / Updater

An Installer and Updater will be essential to installing all the files and updating the forum when new versions are released. This will require AJAX to get files and check for updates via the Github repo. A JSON file might be best for compiling a list of the versions that have been released and installed.

The draft for the installer can be found here, the updater has not yet been developed. I'm considering to restrict updating and installation to founders, because they'll require high-level access to the admin panel.

Add "Custom" to theme selector

Description : There's nothing better than being able to personalize things. As such, I believe adding a new option to the theme selector that allows the user to change the theme to ANY color they prefer would be ideal.

Notes :

  • To make things simple, using the color input type for color selection might be a good idea.
  • Themes on FAE consist of 5 color shades. So we can either automatically generate the 4 shades OR allow the user to select them.

Mobile Version Post Design Bug

Topic on forum : http://fmdesign.forumotion.com/t1097-mobile-version-bug#24880

Description : There appears to be an issue with the responsiveness on some mobile devices. The problem is that there's a large space between the profile and message content. When viewing on mobile the profile should display horizontally above the post content, like this, but that isn't the case here.

Image : http://img4.hostingpics.net/pics/696001fullsizeoutput35.jpg

Todo :

  1. The best place to start would be by looking over the CSS that concerns the responsiveness of posts, which is here.
  2. DDril mentioned that adjusting the width via the CP allows you to reproduce the issue. This is worth looking into as well.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.